一、问题描述
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 compression-webpack-plugin@5.0.1
然后修改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证书。
