vue+webpack微信公衆號H5點擊跳轉報錯err loading chunk XX failed

原文鏈接:https://dsx2016.com/?p=987

微信公衆號:大師兄2016

問題場景

每次只要一發版,無論是測試環境還是線上環境,就會有點擊卡死問題.

測試環境排查的錯誤信息爲loading chunk XX failed

表現形式爲,發版前用戶在瀏覽對應網頁,長時間停留在頁面或者正在交互,發版後點擊就報錯並卡死.

原因分析

由於緩存所產生的問題.

webpack每次打包的js文件名稱和hash值不一樣,當發版後當前html依賴新的js文件後不匹配,沒有完全拉取網頁文件,造成報錯.

具體的還可以理解爲vue路由的懶加載,點擊時才獲取依賴文件,但發版之後依賴文件有了變化和衝突,造成vue router出錯

解決方案

使用vue router提供的錯誤監聽,在出現loading chunk XX failed時,強制刷新當前網頁即可.

經測試,有效.

具體代碼如下

 

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) {
    // 強制刷新當前網頁
    window.location.reload();
  }else{
    //其他錯誤自行處理
    console.log(error)
  }
});

 

Categories代碼