原文鏈接: https://dsx2016.com/?p=984
微信公衆號:大師兄2016
白屏原因
微信公衆號H5白屏現象很多,一部分是瀏覽器和app自身的原因,一部分是開發異常問題.
如果是開發的bug,多半是js報錯,阻斷了html的渲染,這種白屏刷新結果仍然是白屏.
還有一種白屏是公衆號菜單進入首頁或者初次點擊鏈接進入首頁白屏,但是刷新又好了.
這種白屏原因可能有很多
-
手機本身網絡問題,
wifi和4G的弱網和異常,換個wifi或者重啓路由就可以了. -
因爲內存不足或者微信緩存造成的白屏,偶現,但是基於手機性能,刷新就好了,如首頁圖片加載過多過大,
html文件過大,長時間未清理系統緩存. -
系統抽風的靈異現象,微信大面積白屏,長時間未關機,未重啓微信等
還有一種就是發版後html的緩存文件不一致問題
由於線上不好排查,白屏也可能屬於尚未加載完成,定位很困難.
CommonsChunkPlugin
有一種說法是因爲webpack的打包機制,分離之後在微信瀏覽器的內核上,不一定按順序加載,造成阻斷白屏.
webpack使用了CommonsChunkPlugin將相關文件打包成了幾個固定的文件vendor.js,runtime.js等
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'runtime'],
filename: `[name].${version}.js`,
}),
爲了避免出現問題,將文件不分包加載,直接按原本的文件加載,或者統一打包成一個文件.
把webpack.optimize.CommonsChunkPlugin註釋掉即可
表現形式
白屏主要集中在發版線上後的一段時間
主要以ios居多,安卓偶現,刷新就好了.
如果註銷插件之後,首頁的內容會一次性加載很多,建議加loading效果,提升用戶體驗.