Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題如何解決

本文小編為大家詳細(xì)介紹“Vue開發(fā)中出現(xiàn)Loading Chunk Failed的問題如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue開發(fā)中出現(xiàn)Loading Chunk Failed的問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

報(bào)錯(cuò)現(xiàn)象

某天測(cè)試反應(yīng)在點(diǎn)擊頁簽的時(shí)候出現(xiàn)了 Loading Chunk Failed 的錯(cuò)誤，經(jīng)過本人百度分析后判斷是異步組件在發(fā)包時(shí)舊資源被替換的問題，然后一通CV操作之后發(fā)現(xiàn)問題還是存在，于是便有如下探究。

發(fā)生原因

用戶在發(fā)包前進(jìn)入了頁面（也就是請(qǐng)求到了 index.html ），并且在 index.html 中可以得知將來要請(qǐng)求的異步組件的名字叫 a.js ，當(dāng)服務(wù)器這時(shí)候發(fā)包，并且清空掉了 a.js 這個(gè)資源，改名叫 a1.js 。發(fā)包之后用戶點(diǎn)擊 a.js 對(duì)應(yīng)的組件時(shí)，瀏覽器拿著先前在 index.html 得知的 a.js 這個(gè)名字去服務(wù)器請(qǐng)求資源就得到了以上的 Loading Chunk Failed 報(bào)錯(cuò)。

正常的生產(chǎn)上線流程可能存在靜態(tài)資源和頁面分屬不同服務(wù)器,應(yīng)該是先全量部署靜態(tài)資源（各種js，css，圖片），不清空舊資源，然后再部署頁面。但如果清空掉舊資源就可能導(dǎo)致報(bào)錯(cuò)。

如果在測(cè)試環(huán)境中可能會(huì)采取清空覆蓋掉舊資源，這個(gè)時(shí)候就必須要前端進(jìn)行控制了。

解決思路

• 在監(jiān)聽到路由報(bào)錯(cuò)的時(shí)候，前端強(qiáng)制刷新頁面，重新獲取index.html和對(duì)應(yīng)的靜態(tài)資源路徑。

• 設(shè)置preFetch，網(wǎng)絡(luò)空閑的時(shí)候就請(qǐng)求資源，可以大幅降低報(bào)錯(cuò)的幾率。

觸發(fā)bug

想要解決問題首先就是得復(fù)現(xiàn)問題，涉及到發(fā)包上線的測(cè)試和驗(yàn)證都有點(diǎn)小尷尬，因此提供下個(gè)人思路

• 最直接的就是你開個(gè)頁面，然后控制臺(tái)網(wǎng)絡(luò)禁用掉緩存，然后發(fā)包后進(jìn)入其他異步組件觸發(fā)bug。

• 如果想要觸發(fā) onError 這個(gè)鉤子的話，直接斷開 devServer 就可以了。

• 本地復(fù)現(xiàn)的話就是開個(gè)本地服務(wù)器，然后進(jìn)入頁面，把 dist 文件夾中對(duì)應(yīng)的js文件刪去即可觸發(fā)。

代碼實(shí)現(xiàn)

 /* 正則使用'\S'而不是'\d' 為了適配寫魔法注釋的朋友，寫'\d'遇到魔法注釋就匹配不成功了。
  * 使用reload方法而不是replace原因是replace還是去請(qǐng)求之前的js文件，會(huì)導(dǎo)致循環(huán)報(bào)錯(cuò)。
  * reload會(huì)刷新頁面， 請(qǐng)求最新的index.html以及最新的js路徑。
  * 直接修改location.href或使用location.assign或location.replace，和router.replace同理， 
  * 在當(dāng)前場(chǎng)景中請(qǐng)求的依然是原來的js文件，區(qū)別僅有瀏覽器的歷史棧。因此必須采用reload.
  * reload()有個(gè)特點(diǎn)是當(dāng)你在A頁面試圖進(jìn)入B頁面的時(shí)候報(bào)錯(cuò)，會(huì)在A頁面刷新，因此在刷新后需要手動(dòng)書寫邏輯
  * 進(jìn)入B頁面，可以在router.onReady()方法里面書寫
  * 為了避免在特殊情況下服務(wù)器丟失資源導(dǎo)致無限報(bào)錯(cuò)刷新，做了一步控制，僅嘗試一次進(jìn)入B頁面，
  * 如果不成功就只刷新A頁面，停留在當(dāng)前的A頁面。
  */
 
 
 router.onError((error) => {
   const jsPattern = /Loading chunk (\S)+ failed/g
   const cssPattern = /Loading CSS chunk (\S)+ failed/g
   const isChunkLoadFailed = error.message.match(jsPattern || cssPattern)
   const targetPath = router.history.pending.fullPath
   if (isChunkLoadFailed) {
     localStorage.setItem('targetPath', targetPath)
     window.location.reload()
   }
 })
 
 router.onReady(() => {
   const targetPath = localStorage.getItem('targetPath')
   const tryReload = localStorage.getItem('tryReload')
   if (targetPath) {
     localStorage.removeItem('targetPath')
     if (!tryReload) {
       router.replace(targetPath)
       localStorage.setItem('tryReload', true)
     } else {
       localStorage.removeItem('tryReload')
     }
   }
 })

讀到這里，這篇“Vue開發(fā)中出現(xiàn)Loading Chunk Failed的問題如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。