Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

点击切换路由的时候,有时候会报错,Error: Loading chunk 1 failed. at HTMLScriptElement.d (bootstrap 7d5ba07478b35f182b62:103) #439

Open
maryrui opened this issue Jan 30, 2018 · 74 comments

Comments

@maryrui
Copy link

maryrui commented Jan 30, 2018

只有在 打包后的线上环境会出错,用的是addRouter 动态 添加的,万分感谢楼主指导,谢谢
Error: Loading chunk 1 failed.
at HTMLScriptElement.d (bootstrap 7d5ba07478b35f182b62:103)

@PanJiaChen
Copy link
Owner

请提供更详细信息

@maryrui
Copy link
Author

maryrui commented Jan 31, 2018

image
只有点击路由切换的时候会出现这种错,每次加载报错的区块都不一样(比如:Loading chunk 1 failed.||Loading chunk 2 failed.),前后台两个分开单独项目,都出现了这种问题,后台涉及权限用的是vuex 动态加载路由,前台没有使用。(所有的后端交互都是使用dispatch,会不会有影响)会不会是npm打包问题,毕竟npm经常出错

@maryrui
Copy link
Author

maryrui commented Jan 31, 2018

image
这是报错的源码区域

@maryrui
Copy link
Author

maryrui commented Jan 31, 2018

image
楼主自己的项目也会出现这种报错哦

@PanJiaChen
Copy link
Owner

PanJiaChen commented Jan 31, 2018

并不能出现,你出现这个问题很多可能是缓存问题。
@maryrui 能稳定重现么?

@maryrui
Copy link
Author

maryrui commented Feb 1, 2018

image
重现度还有点高,点了十几次路由就重现

@PanJiaChen
Copy link
Owner

mac chrome 我试了很久都没能重现

@luchanan
Copy link

luchanan commented Feb 8, 2018

我也遇到这个问题,然后我去运行楼主的项目,发现在登录的时候出现这个问题的几率非常高

image

我只改了一处config/index.js中build的

assetsPublicPath: './'
改为
assetsPublicPath: '/test/',

打包之后,你在本地运行这个打包后项目,是没有这个问题的

但是把它放在服务器的话,重现几乎90%

网址只有一个域名,所以用test文件夹作为项目区分

@luchanan
Copy link

莫名奇妙域名被注入script(非本项目)脚本,导致出错,没有就是好的

@maryrui
Copy link
Author

maryrui commented Feb 24, 2018

@luchanan 那你解决了吗,动态加载路由确实会出现此问题,楼主的项目用mac的chrome确实不会出现此问题

@maryrui
Copy link
Author

maryrui commented Feb 24, 2018

image
window chrome重现的非常高,换了同事的机子重现度也一样

@luchanan
Copy link

@maryrui,你看看你项目head有没有被注入一些奇怪的script,自从没有那被注入的script我就没有重现了,你看看是不是这个导致的,我也是用w10+chrome

@seean-chan
Copy link

也出现了同样的问题,在打包后的线上环境会出错,点击侧栏卡顿,然后过很久就报错,压面页跳转不出来。有没有什么解决方法?
error

@guohui666
Copy link

也是一样的问题

@Yezily
Copy link

Yezily commented May 28, 2018

谢谢花裤衩大佬的指导,我也出现了同样的问题,不使用动态加载有一段时间没出现,现在又出现了,
我两个项目都出现了这个问题,都引入了楼主的模板里面的部分内容,目前还没着找到具体原因,
每次出现都是点击切换路由的时候,每次出现的时候点击的路由都不一样,刷新页面就好了,本地没有过,都是打包到服务器上才有的

这是使用动态挂载路由的时候报错内容

Mr.e._withTask.i._withTask @ vendor.218c81380028c4c91648.js:12
vendor.218c81380028c4c91648.js:6 Error: Loading chunk 14 failed.
at HTMLScriptElement.i (manifest.655bda8cfcc9f5f6b104.js:1)
s @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
Promise rejected (async)
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
mt @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
d @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ app.31c99b36423b330e6a39.js:1
d @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
ht @ vendor.218c81380028c4c91648.js:6
_t.confirmTransition @ vendor.218c81380028c4c91648.js:6
_t.transitionTo @ vendor.218c81380028c4c91648.js:6
e.push @ vendor.218c81380028c4c91648.js:6
Pt.push @ vendor.218c81380028c4c91648.js:6
handleNav @ app.31c99b36423b330e6a39.js:1
click @ app.31c99b36423b330e6a39.js:1
e @ vendor.218c81380028c4c91648.js:12

这个是关掉动态挂载之后出现的报错

image

@TobyHong
Copy link

TobyHong commented Jun 2, 2018

@TobyHong
Copy link

TobyHong commented Jun 2, 2018

所以说现在没答案?

@TobyHong
Copy link

TobyHong commented Jun 2, 2018

找到答案了,修改webpack.base里面的相关路径

@wangzz719
Copy link

@TobyHong 请问是如何解决的?

@wangzz719
Copy link

将 config.index.js 下的 assetsPublicPath 修改为:
assetsPublicPath: '/',
可以解决问题。

@Yezily
Copy link

Yezily commented Jun 4, 2018

@wangzz719 可是config.index.js 下面的assetsPublicPath 默认参数就是'/'
image

@TobyHong
Copy link

TobyHong commented Jun 4, 2018

@Yezily 你改成./
还有下面引入elementUI有些项目也会出问题,这个也可以排查下。

@Yezily
Copy link

Yezily commented Jun 4, 2018

@TobyHong 好的 我去试试,谢了大兄弟

@qyf0310
Copy link

qyf0310 commented Jun 8, 2018

按将 @wangzz719 说的,把config.index.js 下的 assetsPublicPath 修改为:
assetsPublicPath: '/',
解决了

@ChasonHong
Copy link

ChasonHong commented Jun 12, 2018

@PanJiaChen 打包后放在服务器访问,间隔时间不等再操作,也会偶现Loading chunk 1 failed.||Loading chunk 0 failed,就是使用这个assetsPublicPath: '/',也是一样报错

@ADengrc
Copy link

ADengrc commented Jun 14, 2018

qq 20180614180433
上传到线上后使用公司WIFI第一次访问该文件会被替换所以报错,当我使用4G网络访问却不会报错,应该是运营商网络劫持

@musi1024
Copy link

没有呢

@cxxly
Copy link

cxxly commented May 7, 2019

+1
image

@lzzhanglin
Copy link

ws改了assetsPublicPath 就默认的 不加点 就没问题了

@mia330
Copy link

mia330 commented May 13, 2019

@lzzhanglin 本来就没有点啊

@lzzhanglin
Copy link

@lzzhanglin 本来就没有点啊

那我就不清楚了 反正我是取消那个点就没有问题了

@17khba
Copy link

17khba commented May 14, 2019

复现步骤loading * chunk failed

解决方案,未测试(参考链接里的回答):

// main.js
router.onError(err => {
  const pattern = /^Loading chunk (\d)+ failed\./;
  const isChunkLoadingFailed = pattern.test(err.message);

  if (isChunkLoadingFailed) {
    Message({
      type: 'error',
      message: '服务器版本已更新,正在刷新本地缓存,请稍后...',
      duration: 4000
    })

    window.location.replace(window.location.href);
  }

  console.log('出错了', err);
})

@PanJiaChen

@StinsonZhao
Copy link

StinsonZhao commented Oct 12, 2019

偶发性原因:

  1. 新版本部署前,有用户正在你的网页中
  2. 然后你部署了新版本,而且是顶替原有资源,比如 hash 为 bgt78d 的资源不见了
  3. 这时用户在他现有的页面中进行路由切换,前端路由切换
  4. 这不会触发去重现获取 html,所以老的 html 中的 chunk 信息生效
  5. 这个时候如果访问已经访问过的路由,这些路由中的 chunk 已经被浏览器缓存,路由(页面)能正常,虽然它可能使用的是过时的资源(就你上一个版本发布的资源)
  6. 但是当请求之前没有请求过的路由,因为懒加载的关系,这些路由对应的组件 chunk 没有缓存,根据老的 chunk 对应信息,去请求老的静态资源,而老的静态资源又已经由于你的部署顶替掉了,于是出现找不到的问题
  7. 刷新就可以,因为刷新重现获取了一遍 html 文档,chunk 对应信息也就刷新了

简单解决思路:

上面也提到了刷新页面,但是仅仅捕获到错误就刷新,很可能出现死循环
所以结合重试次数和重试间隔来重试会比较好

更好的解决思路:

  • 构建的时候静态资源路径带上版本信息,这个有很多方法
    • 比如路径中携带,比如原来请求 /static/js/balabal.[hash].js,现在/[version]/static/balabal.[hash].js
  • 部署的时候不用顶替部署,而是保留老版本,有很多方式,比如
    • 如果是裸机部署,可以在 web 服务器根目录下,新建 version 对应的目录,然后部署到这个目录
    • 如果是 docker 容器顶替部署,可以在构建前端的时候将前端资源打成 tar 包上传到某个地方,这样在打包新版本的 docker 镜像的时候,可以拉取上一个版本的 tar 包,也打包到镜像中,这样 docker 中也能有两个版本的资源,通过版本路径区分下
  • 这样的情况下,原有页面的用户还是会访问到老的资源,虽然可能版本落后,但是不会出错,部署后新打开的页面就会访问新的资源

PS.如果不想暴露 version,可以把 version 做一个 hash 或者混淆

@thinkerou
Copy link

关闭浏览器,重新启动进入就好了

@LeeeMooo
Copy link

LeeeMooo commented Dec 2, 2019

mark一下

@mstcyj
Copy link

mstcyj commented Dec 5, 2019

还有别的更好的方法解决这个问题吗?请大佬只招。

@rainydayDY
Copy link
Contributor

偶发性原因:

  1. 新版本部署前,有用户正在你的网页中
  2. 然后你部署了新版本,而且是顶替原有资源,比如 hash 为 bgt78d 的资源不见了
  3. 这时用户在他现有的页面中进行路由切换,前端路由切换
  4. 这不会触发去重现获取 html,所以老的 html 中的 chunk 信息生效
  5. 这个时候如果访问已经访问过的路由,这些路由中的 chunk 已经被浏览器缓存,路由(页面)能正常,虽然它可能使用的是过时的资源(就你上一个版本发布的资源)
  6. 但是当请求之前没有请求过的路由,因为懒加载的关系,这些路由对应的组件 chunk 没有缓存,根据老的 chunk 对应信息,去请求老的静态资源,而老的静态资源又已经由于你的部署顶替掉了,于是出现找不到的问题
  7. 刷新就可以,因为刷新重现获取了一遍 html 文档,chunk 对应信息也就刷新了

简单解决思路:

上面也提到了刷新页面,但是仅仅捕获到错误就刷新,很可能出现死循环
所以结合重试次数和重试间隔来重试会比较好

更好的解决思路:

  • 构建的时候静态资源路径带上版本信息,这个有很多方法

    • 比如路径中携带,比如原来请求 /static/js/balabal.[hash].js,现在/[version]/static/balabal.[hash].js
  • 部署的时候不用顶替部署,而是保留老版本,有很多方式,比如

    • 如果是裸机部署,可以在 web 服务器根目录下,新建 version 对应的目录,然后部署到这个目录
    • 如果是 docker 容器顶替部署,可以在构建前端的时候将前端资源打成 tar 包上传到某个地方,这样在打包新版本的 docker 镜像的时候,可以拉取上一个版本的 tar 包,也打包到镜像中,这样 docker 中也能有两个版本的资源,通过版本路径区分下
  • 这样的情况下,原有页面的用户还是会访问到老的资源,虽然可能版本落后,但是不会出错,部署后新打开的页面就会访问新的资源

PS.如果不想暴露 version,可以把 version 做一个 hash 或者混淆

可是你这样缓存就失效了

@rainydayDY
Copy link
Contributor

其实不只是这个项目会出现这样的问题,只要用到动态加载的基本就都会有,不是顶替部署的情况下也有,使用contenthash,namechunk,部署到cdn,用户使用旧的manifest,拉取旧的资源,按理不会因为chunkId对应不上load失败,使用新的manifest,拉取新的资源也没问题,但是就是会loadchunk失败,有三种类型,error missing timeout,至今无解

@rickzuo
Copy link

rickzuo commented Jan 6, 2020

我觉得这个文章的结尾评论说得有道理:https://segmentfault.com/a/1190000016382323

  • 以下是引用

这个通常是由于webpack打包重命名了改动过的css和js文件,并且删除了原有的文件,然后有两种场景:
1.用户正在浏览页面时你发包了,并且你启用了懒加载,这个时候用户的html文件中的js和css名称就和你服务器上的不一致,导致这个错误
2.用户浏览器有html的缓存,这种情况不管是否启用懒加载,都会有这个问题

@ctq123
Copy link

ctq123 commented Feb 25, 2020

求解决方法

1 similar comment
@15001217168
Copy link

求解决方法

@han88829
Copy link

最近问题出现挺频繁的,使用js刷新无效,如果放弃缓存体验又太差,至今还无完美的解决方案

@wxy1995
Copy link

wxy1995 commented May 1, 2020

我们也遇到同样的问题,最后发现是运营商劫持(联通)

请问如何排查到的呢

@zyz954489346
Copy link

同样的问题,尝试过github上面webpack-retry-chunk-load-plugin插件,可以针对js文件拉取error自动retry,少量解决了问题,但依然存在Loading CSS chunk 22 failed及Loading chunk 0 failed,前端盲目捕获error然后reload是极不可取的,目前没有上cdn,不知道上cdn之后还会不会出现类似问题。

@novenn
Copy link

novenn commented May 28, 2020

可能是数据数据劫持的问题
看这个连接

@novenn
Copy link

novenn commented May 28, 2020

同样的问题,尝试过github上面webpack-retry-chunk-load-plugin插件,可以针对js文件拉取error自动retry,少量解决了问题,但依然存在Loading CSS chunk 22 failed及Loading chunk 0 failed,前端盲目捕获error然后reload是极不可取的,目前没有上cdn,不知道上cdn之后还会不会出现类似问题。

莫名奇妙域名被注入script(非本项目)脚本,导致出错,没有就是好的

你这个应该是数据被劫持了https://blog.novenn.com/webpack%E4%B9%8BLoading-chunk-x-failed/

@bluest-hu
Copy link

该问题有解么,我提供一下我遇到情况的 case: 文档 HTML 的请求是有缓存的

Age: 0
Cache-Control: max-age=60
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 1164
Content-Type: text/html
Date: Thu, 04 Jun 2020 17:47:28 GMT

@bluest-hu
Copy link

该问题有解么,我提供一下我遇到情况的 case: 文档 HTML 的请求是有缓存的

Age: 0
Cache-Control: max-age=60
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 1164
Content-Type: text/html
Date: Thu, 04 Jun 2020 17:47:28 GMT

更换为非懒加载模式,再无此问题...

@erasine777
Copy link

請持續使用懶加載,並且命名webpackChunkName,防止webpack因為無命名預設使用0.js, 1.js, 2.js....時,造成無法正確讀取js檔案的錯誤
2020-09-17 102745

@realwugang
Copy link

今天我也遇到这个问题(安卓4.4),报错unhandled promise rejection loading chunk 2 failed.....type:'missing''
然后也按很多Google能搜索到的方法尝试,包括使用webpack-retry-chunk-load-plugin插件,没有解决。
后续在IE控制台单独执行这个chunk,发现语法错误(某个npm包居然没编译好)....修复后解决。。。希望对看到这个问题的人有一点点帮助吧!

@13116176539
Copy link

本地启动,报错app.js:978 ChunkLoadError: Loading chunk 4 failed.
然后按网上的方法
publicPath :'/' 这个就可以了

@13116176539
Copy link

image

@13116176539
Copy link

然后可以了.刚测试了部署服务器也没问题了.
image

@13116176539
Copy link

image

@TobyHong
Copy link

TobyHong commented Feb 23, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests