vue h5在微信浏览器中首次打开加载缓慢或白屏几秒后才渲染解决方案

一、问题描述

vue h5 首次在电脑端浏览器打开，正常快速响应。
vue h5 首次在手机微信浏览器中打开，会有3到5秒白屏，然后正常渲染。
vue h5 二次以上，在手机微信浏览器中打开，有缓存，正常快速响应。

二、问题原因猜想

• 图片过多过大
• JS文件过大
• 服务器带宽过小
• 用户网速过慢
• https证书校验过慢
• 手机端微信浏览器BUG

三、针对原因逐个排查

1、图片过多过大

把首屏删光，异常仍然存在

2、JS文件过大

JS文件最大也就400kb，其他都是几十kb左右，不算大，浏览器打开响应很快，觉得不像代码有问题。

3、服务器带宽过小

5M带宽够快了

4、用户网速过慢

无论是4G、5G、wifi异常仍然存在

5、https证书校验过慢

这问题比较难复现

6、手机端微信浏览器BUG

确实在电脑端浏览器正常，在手机端微信浏览器才有这问题。

四、决定针对项目进行充分的压缩和分包加载

1、webpackChunk

在router中使用了webpackChunkName，但发现全部都使用了index这个名称，没有充分的分开命名打包

          component: () => import(/* webpackChunkName: "index" */ '@/pages/article')

2、使用gzip压缩js,html,css

安装：cnpm i [email protected]
然后修改vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
...
configureWebpack: (function () {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
  // new MyAwesomeWebpackPlugin()
  new CompressionPlugin({
  algorithm: 'gzip', // 使用gzip压缩
  test: /\.js$|\.html$|\.css$/, // 匹配文件名
  filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
  minRatio: 1, // 压缩率小于1才会压缩
  threshold: 10240, // 对超过10k的数据压缩
  deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
})
]
}
}

3、服务器配置nginx，支持gzip

开启

gzip_static on;

五、总结

1、在电脑端谷歌浏览器访问vue h5响应正常，从直接使用的感受看像是边加载边渲染。
2、在手机端微信浏览器访问vue h5出现加载缓慢、白屏3到5秒后，才开始渲染，从直接使用的感受看像是加载完后一次性渲染。
所以PC端浏览器没有像手机微信浏览器那样白屏的感受。
解决手机微信浏览器白屏的方法如下

充分压缩、减小首屏文件的大小（JS/CSS/HTML）
压缩和减小首屏文件大小的方式见上文。

六、后续

今天又爆出白屏情况，又经过一翻排查，将问题根源定在HTTPS证书上。
由于我们使用了let‘sencrypt 免费证书，在打开时，要https校验，let‘sencrypt 在国外，网络请求超过3到5秒，回来后才继续渲染。
然后我们取消HTTPS，改成HTTP，发现访问速度很快，没有白屏现象。
所以决定更换HTTPS证书，采用阿里云HTTPS证书。