详解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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
详解angular应用容器化部署
Aug 14 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
div层的移动及性能优化
2010/11/16 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
责任心演讲稿
2014/05/14 职场文书
幼儿生日活动方案
2014/08/27 职场文书
119消防日活动总结
2014/08/29 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python