Vue项目中出现Loading chunk {n} failed问题的解决方法

这种报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。

当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：

1、服务端解决方式
报错的原因是某些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);
}

2、前端解决方式

由于项目里面用到了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);
  }
});