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 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证书。

推荐阅读更多精彩内容