使用Vue+Webpack開發微信公衆號頁面發佈時,Android端打開就快很多,iOS端打開就很慢,登錄進入主頁後頁面間切換偶爾會出現白屏,需要刷新纔可以重新顯示。調試會發現錯誤: can't find variable: webpackjsonp,原來,Webpack在打包時用到的插件CommonsChunkPlugin會將相關文件分別打包成manifest、vendor和app三個js文件。
出現白屏估計是在iOS端的Webview加載時三個文件順序不一樣導致,而打開頁面慢是因爲manifest和vendor文件比app文件先加載。,可註釋解決,如下所示:
對比了js目錄下,有這個區別:
在利用構建工具進行打包時,因爲第三方引用模塊代碼通常很大,通常會將業務代碼和第三方引用模塊代碼分開打包,從而利用瀏覽器的緩存區提高應用程序的首屏加載速度。
上面的CommonsChunkPlugin插件就是去抽取這些第三方的部分作爲vendor.js獨立打包,比較過打包後文件大小,未使用CommonsChunkPlugin的js目錄大小會大兩倍,題目出現的問題應該就是配置不對的問題,再好好了解下背後原理再試試先。