報錯現(xiàn)象

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

發(fā)生原因

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

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

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

解決思路

• 在監(jiān)聽到路由報錯的時候，前端強(qiáng)制刷新頁面，重新獲取index.html和對應(yīng)的靜態(tài)資源路徑。
• 設(shè)置preFetch，網(wǎng)絡(luò)空閑的時候就請求資源，可以大幅降低報錯的幾率。

觸發(fā)bug

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

• 最直接的就是你開個頁面，然后控制臺網(wǎng)絡(luò)禁用掉緩存，然后發(fā)包后進(jìn)入其他異步組件觸發(fā)bug。
• 如果想要觸發(fā) onError 這個鉤子的話，直接斷開 devServer 就可以了。
• 本地復(fù)現(xiàn)的話就是開個本地服務(wù)器，然后進(jìn)入頁面，把 dist 文件夾中對應(yīng)的js文件刪去即可觸發(fā)。

代碼實現(xiàn)

?/* 正則使用'\S'而不是'\d' 為了適配寫魔法注釋的朋友，寫'\d'遇到魔法注釋就匹配不成功了。
??* 使用reload方法而不是replace原因是replace還是去請求之前的js文件，會導(dǎo)致循環(huán)報錯。
? * reload會刷新頁面， 請求最新的index.html以及最新的js路徑。
??* 直接修改location.href或使用location.assign或location.replace，和router.replace同理，?
? * 在當(dāng)前場景中請求的依然是原來的js文件，區(qū)別僅有瀏覽器的歷史棧。因此必須采用reload.
??* reload()有個特點是當(dāng)你在A頁面試圖進(jìn)入B頁面的時候報錯，會在A頁面刷新，因此在刷新后需要手動書寫邏輯
? * 進(jìn)入B頁面，可以在router.onReady()方法里面書寫
? * 為了避免在特殊情況下服務(wù)器丟失資源導(dǎo)致無限報錯刷新，做了一步控制，僅嘗試一次進(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')
???? }
?? }
?})

一點思考

我之前提到過異步組件而不是路由懶加載導(dǎo)致了這個問題的發(fā)生，有趣的是，當(dāng)你子組件是用懶加載方式進(jìn)行，并且沒有設(shè)置或者關(guān)閉了preFetch，且之前沒有緩存。很可能也會報這種錯。在網(wǎng)絡(luò)中和路由懶加載一樣是報 404 找不到對應(yīng)資源，區(qū)別就是不會報 loadingChunkError 的錯誤。

設(shè)置緩存策略中頁面一定要對頁面( inedx.html )設(shè)置no cache no store，避免依然指向舊的已被刪除的資源，只有Get方式獲取的資源才可以設(shè)置緩存策略。

到此這篇關(guān)于Vue開發(fā)中出現(xiàn)Loading Chunk Failed的問題解決的文章就介紹到這了,更多相關(guān)Vue Loading Chunk Failed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論