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

向右看齐 2021-08-19 12:05 870阅读 0赞

参考：

[https://segmentfault.com/a/1190000016382323][https_segmentfault.com_a_1190000016382323]

[https://blog.csdn.net/Maximus\_ckp/article/details/85079244][https_blog.csdn.net_Maximus_ckp_article_details_85079244]

最近有个Vue项目中会偶尔出现`Loading chunk {n} failed`的报错，报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现，用真机又会出现，不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论： [Loading chunk \{n\} failed \#742][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上的回答][github]， 相对比较繁琐，而且用户体验并不好，只能刷新当前页面，不能跳转到目标页。

### 前端实现 ###

由于项目里面用到了vue-router，vue-router的错误处理函数 [onError][] 是不是能够捕获该错误呢？我们来看一下官方文档的说明:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

**当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。** 完全符合我们场景，所以在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);
      }
    });

还有另外一种方案，我觉得比较合理就是采用location.reload重新刷新页面,按需使用

// 解决Loading chunk (\d)+ failed问题
    $router.onError((error) => {
        const pattern = /Loading chunk (\d)+ failed/g;
        const isChunkLoadFailed = error.message.match(pattern);
        if(isChunkLoadFailed){
        	// 用路由的replace方法，并没有相当于F5刷新页面，失败的js文件并没有从新请求，会导致一直尝试replace页面导致死循环，而用 location.reload 方法，相当于触发F5刷新页面，虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，从而曲线救国解决该问题
            location.reload();
            // const targetPath = $router.history.pending.fullPath;
            // $router.replace(targetPath);
        }    
      });

当捕获到`Loading chunk {n} failed`的错误时我们重新渲染目标页面，这种实现明显更简单和友好。

[https_segmentfault.com_a_1190000016382323]: https://segmentfault.com/a/1190000016382323
[https_blog.csdn.net_Maximus_ckp_article_details_85079244]: https://blog.csdn.net/Maximus_ckp/article/details/85079244
[Loading chunk _n_ failed _742]: https://github.com/nuxt/nuxt.js/issues/742
[github]: https://github.com/nuxt/nuxt.js/issues/742#issuecomment-393776050
[onError]: https://router.vuejs.org/zh/api/#router-onerror
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/6e95d25f23ba41b18adf0cae21168235.png