vue+webpack项目在iOS微信端偶尔出现白屏,刷新又能重新进入的解决方案,在Android上不会出现

           问题描述:微信公众号内部的项目,我使用的是vue+webpack的方式,路径配置正确的情况下,在Chrome上运行正常,执行npm run build放在测试服务器上,配置好相应入口,通过微信访问,在Android机 上访问一起都正常,都没出现白屏的情况,但在iOS上偶尔出现白屏,退出重新进入能够进去,或者刷新页面也能进入。

        问题解决过程:后来通过调试发现,报的错误can't find variable:webpackjsonp 。查找相关资料,webpack在打包的时候使用插件CommonsChunkPlugin将相关文件分别打包成manifest ,vendor, 和app三个js文件,出现白屏的原因可能是在Safari浏览器加载的时候app文件可能先于前面的文件加载才导致白屏,因为vendor打包的文件都是node_moduels中的。偶尔能进入的话应该是manifest和vendor文件比App文件先加载,(具体也不是很清楚)。

         后来按照网上的介绍,在webpack.prod.config.js的插件HtmlWebpackPlugin中添加chunks: ['manifest', 'vendor', 'app'],结果在iOS上还是偶尔白屏。后来我想,能不能只生成一个文件,这样就不存在加载顺序了,然后对CommonsChunkPlugin了解发现,其实主要是做一些缓存方面的优化,于是就直接把CommonsChunkPlugin这个插件注释掉,结果打包完是一个JS文件,然后放在测试服上,iOS白屏不在出现,试了很多次,都能正常进入,Android上也能正常进入。至于进入的时候可能会比较慢,可以加入一些loading动画,提高用户体验。

        最后,刚接触webpack和vue不久,有什么问题欢迎各位大佬不吝赐教。

猜你喜欢

转载自blog.csdn.net/m0_37781149/article/details/82078317