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

某天測試反應(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ò)。

如果在測試環(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ā)包上線的測試和驗(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)前場景中請(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')
???? }
?? }
?})

一點(diǎn)思考

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

設(shè)置緩存策略中頁面一定要對(duì)頁面( 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論