Vue+Webpack发布微信公众号在iOS打开加载慢或返回时会出现空白界面需要刷新进入问题解决

        使用Vue+Webpack开发微信公众号页面发布时,Android端打开就快很多,iOS端打开就很慢,登录进入主页后页面间切换偶尔会出现白屏,需要刷新才可以重新显示。调试会发现错误: can't find variable: webpackjsonp,原来,Webpack在打包时用到的插件CommonsChunkPlugin会将相关文件分别打包成manifest、vendor和app三个js文件。

        出现白屏估计是在iOS端的Webview加载时三个文件顺序不一样导致,而打开页面慢是因为manifest和vendor文件比app文件先加载。,可注释解决,如下所示:

        Vue+Webpack发布微信公众号在iOS打开加载慢或返回时会出现空白界面需要刷新进入问题解决_第1张图片

        对比了js目录下,有这个区别:

        在利用构建工具进行打包时,因为第三方引用模块代码通常很大,通常会将业务代码和第三方引用模块代码分开打包,从而利用浏览器的缓存区提高应用程序的首屏加载速度。

        上面的CommonsChunkPlugin插件就是去抽取这些第三方的部分作为vendor.js独立打包,比较过打包后文件大小,未使用CommonsChunkPlugin的js目录大小会大两倍,题目出现的问题应该就是配置不对的问题,再好好了解下背后原理再试试先。

你可能感兴趣的:(Frontend)