微信服务号白屏问题

目前偶尔有用户反馈微信服务号白屏问题。主要分两种：

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去缓存如何配置，还需要继续探索，后面如果解决了再更新