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不久,有什麼問題歡迎各位大佬不吝賜教。

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