vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了

原文链接: https://dsx2016.com/?p=984

微信公众号:大师兄2016

白屏原因

微信公众号H5白屏现象很多,一部分是浏览器和app自身的原因,一部分是开发异常问题.

如果是开发的bug,多半是js报错,阻断了html的渲染,这种白屏刷新结果仍然是白屏.

还有一种白屏是公众号菜单进入首页或者初次点击链接进入首页白屏,但是刷新又好了.

这种白屏原因可能有很多

• 手机本身网络问题,wifi和4G的弱网和异常,换个wifi或者重启路由就可以了.

• 因为内存不足或者微信缓存造成的白屏,偶现,但是基于手机性能,刷新就好了,如首页图片加载过多过大,html文件过大,长时间未清理系统缓存.

• 系统抽风的灵异现象,微信大面积白屏,长时间未关机,未重启微信等

还有一种就是发版后html的缓存文件不一致问题

由于线上不好排查,白屏也可能属于尚未加载完成,定位很困难.

CommonsChunkPlugin

有一种说法是因为webpack的打包机制,分离之后在微信浏览器的内核上,不一定按顺序加载,造成阻断白屏.

webpack使用了CommonsChunkPlugin将相关文件打包成了几个固定的文件vendor.js,runtime.js等

 

new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor', 'runtime'],
    filename: `[name].${version}.js`,
 }),

 

为了避免出现问题,将文件不分包加载,直接按原本的文件加载,或者统一打包成一个文件.

把webpack.optimize.CommonsChunkPlugin注释掉即可

表现形式

白屏主要集中在发版线上后的一段时间

主要以ios居多,安卓偶现,刷新就好了.

如果注销插件之后,首页的内容会一次性加载很多,建议加loading效果,提升用户体验.