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的本质缘由会再更新本文，欢迎关注！

感谢你们阅读，另外，在这边帮朋友推一个爱心众筹，但愿你们可以奉献点爱心，朋友母亲，身患直肠癌，目前在北京武警总医院接收治疗，可留言留下您的联系方式，往后感激你们！