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


Posted in Javascript onSeptember 14, 2018

最近有个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 是不是能够捕获该错误呢?我们来看一下官方文档的说明:

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

当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在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的本质原因会再更新本文,欢迎关注!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
node中的session的具体使用
Sep 14 #Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 #Javascript
You might like
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python logging日志模块的详解
2017/10/29 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python request操作步骤及代码实例
2020/04/13 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
马智宇婚礼主持词
2014/03/22 职场文书
无传销社区工作方案
2014/05/13 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
pytest进阶教程之fixture函数详解
2021/03/29 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang