Vue开发中出现Loading

⽬录

报错现象发⽣原因解决思路触发bug⼀点思考报错现象

某天测试反应在点击页签的时候出现了 Loading Chunk Failed 的错误，经过本⼈百度分析后判断是异步组件在发包时旧资源被替换的问题，然后⼀通CV操作之后发现问题还是存在，于是便有如下探究。

发⽣原因

⽤户在发包前进⼊了页⾯（也就是请求到了 index.html ），并且在 index.html 中可以得知将来要请求的异步组件的名字叫 a.js，当服务器这时候发包，并且清空掉了 a.js 这个资源，改名叫 a1.js 。发包之后⽤户点击 a.js 对应的组件时，浏览器拿着先前在 index.html 得知的 a.js 这个名字去服务器请求资源就得到了以上的 Loading Chunk Failed 报错。

正常的⽣产上线流程可能存在静态资源和页⾯分属不同服务器,应该是先全量部署静态资源（各种js，css，图⽚），不清空旧资源，然后再部署页⾯。但如果清空掉旧资源就可能导致报错。

如果在测试环境中可能会采取清空覆盖掉旧资源，这个时候就必须要前端进⾏控制了。

解决思路

在监听到路由报错的时候，前端强制刷新页⾯，重新获取index.html和对应的静态资源路径。设置preFetch，⽹络空闲的时候就请求资源，可以⼤幅降低报错的⼏率。

触发bug

想要解决问题⾸先就是得复现问题，涉及到发包上线的测试和验证都有点⼩尴尬，因此提供下个⼈思路

最直接的就是你开个页⾯，然后控制台⽹络禁⽤掉缓存，然后发包后进⼊其他异步组件触发bug。如果想要触发 onError 这个钩⼦的话，直接断开 devServer 就可以了。

本地复现的话就是开个本地服务器，然后进⼊页⾯，把 dist ⽂件夹中对应的js⽂件删去即可触发。代码实现

/* 正则使⽤'\\S'⽽不是'\\d' 为了适配写魔法注释的朋友，写'\\d'遇到魔法注释就匹配不成功了。 * 使⽤reload⽅法⽽不是replace原因是replace还是去请求之前的js⽂件，会导致循环报错。 * reload会刷新页⾯， 请求最新的index.html以及最新的js路径。

* 直接修改location.href或使⽤location.assign或location.replace，和router.replace同理， * 在当前场景中请求的依然是原来的js⽂件，区别仅有浏览器的历史栈。因此必须采⽤reload.

* reload()有个特点是当你在A页⾯试图进⼊B页⾯的时候报错，会在A页⾯刷新，因此在刷新后需要⼿动书写逻辑 * 进⼊B页⾯，可以在router.onReady()⽅法⾥⾯书写

* 为了避免在特殊情况下服务器丢失资源导致⽆限报错刷新，做了⼀步控制，仅尝试⼀次进⼊B页⾯， * 如果不成功就只刷新A页⾯，停留在当前的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') } } })

⼀点思考

我之前提到过异步组件⽽不是路由懒加载导致了这个问题的发⽣，有趣的是，当你⼦组件是⽤懒加载⽅式进⾏，并且没有设置或者关闭了preFetch，且之前没有缓存。很可能也会报这种错。在⽹络中和路由懒加载⼀样是报 404 找不到对应资源，区别就是不会报 loadingChunkError 的错误。

设置缓存策略中页⾯⼀定要对页⾯( inedx.html )设置no cache no store，避免依然指向旧的已被删除的资源，只有Get⽅式获取的资源才可以设置缓存策略。

到此这篇关于Vue开发中出现Loading Chunk Failed的问题解决的⽂章就介绍到这了,更多相关Vue Loading Chunk Failed内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！