详解Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错，报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现，用真机又会出现，不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论：Loading chunk {n} failed #742，虽然最后还是不了了之，但是大家可以参考一下。
这个问题出现概率比较小但是一旦出现就会导致页面崩溃，所以还是得解决，下面就贴出我的解决方案：
我的思路是既然找不到报错的原因那么尝试去捕获这个错误并做容错处理，有两种实现，一是在服务端捕获这个错误，一个是在前端捕获。
服务端实现
报错的原因是某些js bundle没有被找到，所以在服务端接收到获取该js文件的请求时先判断该js文件是否存在，如果存在直接返回js文件，如果不存在则返回一个提示信息给前端，让前端处理。假设服务端用express作为静态文件服务器，代码如下：
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();')
}
});
当js文件未找到时，通过res.send('window.serverRebuildHook && window.serverRebuildHook();')向前端返回一条消息，并执行前端定义的serverRebuildHook方法。
接着我们在前端实现serverRebuildHook方法：
window.serverRebuildHook = function () {
alert('服务器版本已更新，正在刷新本地缓存，请稍后...');
location.replace(location.href);
}
方法很简单，提示一下用户服务端更新然后重新刷新当前页面。
这种实现是参考github上的回答， 相对比较繁琐，而且用户体验并不好，只能刷新当前页面，不能跳转到目标页。
前端实现
由于项目里面用到了vue-router，vue-router的错误处理函数 onError 是不是能够捕获该错误呢？我们来看一下官方文档的说明:
当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：
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);
}
});
当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面，这种实现明显更简单和友好。
后续如果发现了导致Loading chunk {n} failed的本质原因会再更新本文，欢迎关注！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue打包添加gzip配置项方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下2019-12-12
最近小编在学习vue.js ,发现里面有好多好玩的东东，今天小编给大家分享Vue.js2.0中的变化，小编会在日后给大家持续更新的，感兴趣的朋友参考下吧2017-10-10
el-tree设置选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等的方法
el-tree默认有较浅的背景色,这里业务需要,选中节点的字体高亮,更改颜色,下面这篇文章主要给大家介绍了关于el-tree选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等的设置方法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了理解vue中的 slot-scope=“scope“，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
详解vuex中的this.$store.dispatch方法
这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了简单的vuex 的使用案例笔记,本文通过demo 是一个 改变 app 的模式 的一个appellation ，选择是 夜间模式还是白天模式，具体代码大家参考下本文2018-04-04
这篇文章主要为大家详细介绍了vue项目中引入外部的js文件的10种方法,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以参考下2023-08-08
Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于Vue3+Vite项目按需自动导入配置以及一些常见问题修复的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
最新评论