最近有個(gè)Vue項(xiàng)目中會偶爾出現(xiàn)Loading chunk {n} failed的報(bào)錯(cuò)，報(bào)錯(cuò)來自于webpack進(jìn)行code spilt之后某些bundle文件lazy loading失敗。但是這個(gè)問題的根本原因沒有被找到，因?yàn)檫@個(gè)問題出現(xiàn)的偶然性太高了，而且有的手機(jī)上會出現(xiàn)，有的不會，用模擬器不會出現(xiàn)，用真機(jī)又會出現(xiàn)，不知道是網(wǎng)絡(luò)原因還是webpack的bug。在github、stackoverflow等各種地方也找不到原因和解決方案，這是github上關(guān)于這個(gè)問題的討論：Loading chunk {n} failed #742，雖然最后還是不了了之，但是大家可以參考一下。

這個(gè)問題出現(xiàn)概率比較小但是一旦出現(xiàn)就會導(dǎo)致頁面崩潰，所以還是得解決，下面就貼出我的解決方案：

我的思路是既然找不到報(bào)錯(cuò)的原因那么嘗試去捕獲這個(gè)錯(cuò)誤并做容錯(cuò)處理，有兩種實(shí)現(xiàn)，一是在服務(wù)端捕獲這個(gè)錯(cuò)誤，一個(gè)是在前端捕獲。

服務(wù)端實(shí)現(xiàn)

報(bào)錯(cuò)的原因是某些js bundle沒有被找到，所以在服務(wù)端接收到獲取該js文件的請求時(shí)先判斷該js文件是否存在，如果存在直接返回js文件，如果不存在則返回一個(gè)提示信息給前端，讓前端處理。假設(shè)服務(wù)端用express作為靜態(tài)文件服務(wù)器，代碼如下：

app.all(/\.js$/, (req, res) => {
  const fileName = req.path.slice(req.path.lastIndexOf('/') + 1);
  const filePath = path.resolve(__dirname, './public/static/js/' + fileName);
  if (fs.existsSync(filePath)) {
    fs.sendFile(filePath);
  } else {
    res.setHeader('Content-Type', 'application/javascript; charset=UTF-8')
    res.setHeader('Accept-Ranges', 'bytes')
    res.setHeader('Vary', 'Accept-Encoding')
    res.setHeader('Transfer-Encoding', 'chunked')
    res.setHeader('Last-Modified', new Date().toUTCString())
    res.setHeader('Cache-Control', 'no-cache')
    res.send('window.serverRebuildHook && window.serverRebuildHook();')
  }
});

當(dāng)js文件未找到時(shí)，通過res.send('window.serverRebuildHook && window.serverRebuildHook();')向前端返回一條消息，并執(zhí)行前端定義的serverRebuildHook方法。

接著我們在前端實(shí)現(xiàn)serverRebuildHook方法：

window.serverRebuildHook = function () {
 alert('服務(wù)器版本已更新，正在刷新本地緩存，請稍后...');
 location.replace(location.href);
}

方法很簡單，提示一下用戶服務(wù)端更新然后重新刷新當(dāng)前頁面。

這種實(shí)現(xiàn)是參考github上的回答， 相對比較繁瑣，而且用戶體驗(yàn)并不好，只能刷新當(dāng)前頁面，不能跳轉(zhuǎn)到目標(biāo)頁。

前端實(shí)現(xiàn)

由于項(xiàng)目里面用到了vue-router，vue-router的錯(cuò)誤處理函數(shù) onError 是不是能夠捕獲該錯(cuò)誤呢？我們來看一下官方文檔的說明:

當(dāng)在渲染一個(gè)路由的過程中，需要嘗試解析一個(gè)異步組件時(shí)發(fā)生錯(cuò)誤。 完全符合我們場景，所以在onError方法中我們實(shí)現(xiàn)如下代碼：

router.onError((error) => {
 const pattern = /Loading chunk (\d)+ failed/g;
 const isChunkLoadFailed = error.message.match(pattern);
 const targetPath = router.history.pending.fullPath;
 if (isChunkLoadFailed) {
  router.replace(targetPath);
 }
});

當(dāng)捕獲到Loading chunk {n} failed的錯(cuò)誤時(shí)我們重新渲染目標(biāo)頁面，這種實(shí)現(xiàn)明顯更簡單和友好。

后續(xù)如果發(fā)現(xiàn)了導(dǎo)致Loading chunk {n} failed的本質(zhì)原因會再更新本文，歡迎關(guān)注！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論