Loading chunk {n} failed 解决方法集合

问题 在这里插入图片描述

如图所示,本地运行好好的 上线后出现的问题,


查询后的结果:

 在加载网页时遇到了"Loading chunk {n} failed"的错误,这可能是由于以下几个原因之一:
  1. 网络连接问题: 请确保您的网络连接稳定,并尝试刷新页面。如果您使用的是移动数据,请检查您的信号强度。有时候,此错误可能是由于网络问题而导致某些资源无法正确加载。
  2. 缓存问题: 您可以尝试清除浏览器缓存并重新加载页面。缓存可能会导致旧版本的资源被加载,而不是最新的版本,从而引发该错误。
  3. 服务器问题: 如果该网站是由其他人或组织托管的,那么可能是服务器出现了问题。在这种情况下,您可以稍后再次尝试加载页面,看看问题是否会自行解决。
  4. 浏览器兼容性问题: 某些加载错误可能与浏览器的兼容性有关。尝试在不同的浏览器中打开网页,看看问题是否依然存在。如果问题只在特定的浏览器中出现,您可以尝试更新该浏览器的版本或者使用其他支持的浏览器。

解决方案:

1. 网络连接问题:

访问其他网站是否正常!
尝试切换网络

2. 缓存问题:

1.让页面每次加载新数据而不是走缓存


<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
  

2.结合重试次数和重试间隔来重试,用 location.reload 方法

js处理方法
// prompt user to confirm refresh
function forceRefresh(){
  // 设置只强制刷行一次页面
  if(sessionStorage.getItem('RELOADED')){
    sessionStorage.getItem('RELOADED','RELOADED')
    window.location.reload(true);
  }
}
window.addEventListener('error',(e)=>{
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) forceRefresh()
 
},true)
vue 项目也会有这样的问题

当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。
vue-element-admin 有人返回和解答
vue-router 有错误拦截 可以对这个错误做处理 ,本质跟js 一样
router.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);
  }
});

配置项目打包文件加上时间戳


const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新,所以给每个js文件都加一个时间戳
module.exports = {
	filenameHashing: true, //建议开启 防止静态资源(图片)替换后 未即时生效
	configureWebpack: {
		output: { // 输出重构  打包编译后的 文件路径  文件名称  【时间戳】
			filename: `./static/js/[name].${Timestamp}.js?v=${Timestamp}`,
			chunkFilename: `./static/js/[name].${Timestamp}.js?v=${Timestamp}`
		},
	}

3.服务器问题

报错的原因是某些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(url);
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值