详解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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python守护线程用法实例
2017/06/23 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
出国留学自荐信
2013/10/25 职场文书
车贷收入证明范本
2014/01/09 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
小学教师师德整改措施
2014/09/29 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
法律服务所工作总结
2015/08/10 职场文书