目前偶尔有用户反馈微信服务号白屏问题。主要分两种:
1:服务号上传图片OCR识别页面突然白屏重新loading问题。
2:用户点击服务号菜单栏,进入相应页面loading白屏问题。
我们主要是Vue框架。面对第一种问题,经过分析发现,我们上传图片用的lrz三方库压缩成文件流上传。当如果涉及到大量图片压缩上传,用户频繁操作就会触发浏览器内存过大崩溃,重新loading的机制。微信服务号web浏览器会崩溃,用safari浏览器测试也会出现。目前6plus和一个用户手机反馈过。量少所以没有继续升入优化。估计优化方向,lrz压缩内存优化
第二种问题,也有一定发生频率。常见于项目发包后。经过设备信息收集,用户日志分析。最终确认问题出在用户点击服务号菜单获取授权成功,进入web包路由时出问题。判断是浏览器缓存导致。针对这个问题,前端优化方案,在webpack打包文件webpack.prod.conf.js中修改相关配置。
const Version = new Date().getTime();
1.在 出口文件 output 配置加入时间戳,减少打包static文件中js和css文件缓存。代码如下:
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
},
2.在html加载脚本添加时间戳防止缓存。代码如下:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
hash:Version,// 加载脚本时候去缓存
然后服务端也需要修改nginx配置,让index.html不缓存。
修改如下
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
但是经过实验,发现后端和运维切换后还是会出现白屏,缓存问题并没有得到根治,具体服务端index.html去缓存如何配置,还需要继续探索,后面如果解决了再更新