Vue+Webpack發佈微信公衆號在iOS打開加載慢或返回時會出現空白界面需要刷新進入問題解決

        使用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目錄大小會大兩倍,題目出現的問題應該就是配置不對的問題,再好好了解下背後原理再試試先。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章