详解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注入技巧
Jun 22 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
javascript 写类方式之三
Jul 05 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
Javascript动画效果(2)
Oct 11 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
用vue写一个日历
Nov 02 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python时间获取及转换知识汇总
2017/01/11 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python输出各行命令详解
2018/02/01 Python
python3.4实现邮件发送功能
2018/05/28 Python
python接入支付宝的实例操作
2020/07/20 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
大学生自我鉴定范文模板
2014/01/21 职场文书
大学生先进事迹材料
2014/02/16 职场文书
2014年电工工作总结
2014/11/20 职场文书
禁毒主题班会教案
2015/08/14 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书