javascript Webpack - 加载块 0 失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46051722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack - Loading chunk 0 failed
提问by jony89
Some of my users are getting this error:
我的一些用户收到此错误：
Unhandled rejection message: 'Loading chunk 0 failed' stack: Loading chunk 0 failed at HTMLScriptElement.n
未处理的拒绝消息：“加载块 0 失败”堆栈：在 HTMLScriptElement.n 上加载块 0 失败
The problem is, I've no success in reproducing it. and I've this error for some time now.
问题是，我没有成功复制它。我有一段时间了这个错误。
It occurs to the same users, everytime they enter the website. but only to some of them. Yet, all of them are using Win7 + Chrome 60, so it's not related to the browser.
每次进入网站时，相同的用户都会发生这种情况。但仅限于其中一些。不过都是Win7+Chrome 60，与浏览器无关。
I could not find anything on the web regard this specific error. In addition I'm not using react-router, I do use react.
我在网上找不到关于这个特定错误的任何内容。此外，我没有使用 react-router，我确实使用了 react。
Any ideas what else could be wrong?
任何想法还有什么可能是错的？
Could it be caused by something related to some security?
可能是由与某些安全相关的事情引起的吗？
I'm using webpack2.6.1 and CommonsChunkPluginto create chunk for my vendors.
我正在使用webpack2.6.1 并CommonsChunkPlugin为我的供应商创建块。
The user agent of one of the users getting the error :
收到错误的用户之一的用户代理：
Mozilla/5.0 (Windo-ws NT 6.1; Win64; x6-4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113?Safari/537.36
Mozilla/5.0 (Windo-ws NT 6.1; Win64; x6-4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113?Safari/537.36
回答by jony89
The reason for this is because I used require.ensurewith webpack which creates chunks and using jsonpto add this script on demand, in other words, It's adding script src tag to the html with the created chunk file.
这样做的原因是因为我使用require.ensurewebpack 创建块并使用jsonp按需添加此脚本，换句话说，它使用创建的块文件将脚本 src 标记添加到 html。
It seems that some users have extensions or even some configuration to block such jsonprequests regardless whether it's the same domain or not.
似乎有些用户有扩展甚至一些配置来阻止这样的jsonp请求，不管它是否是同一个域。
One solution is not using require.ensureat all obviously, or using the error callback to handle this scenario.
一种解决方案是根本不使用require.ensure，或者使用错误回调来处理这种情况。
In addition was looking for a way that webpack will load the script using xhr + eval, which will prevent such scenarios. I just found this npm module: https://github.com/elliottsj/xhr-eval-chunk-webpack-plugin, yet I expected it to be more supported by webpack itself.
另外正在寻找一种方式，webpack 将使用 xhr + eval 加载脚本，这将防止这种情况。我刚刚找到了这个 npm 模块：https: //github.com/elliottsj/xhr-eval-chunk-webpack-plugin，但我希望 webpack 本身能够更多地支持它。
I've opened an issue for this : https://github.com/webpack/webpack/issues/5630, hopefully to see some progress.
我为此打开了一个问题：https: //github.com/webpack/webpack/issues/5630，希望能看到一些进展。
回答by Альбэр Местовый
Answer for search from google:
谷歌搜索的答案：
In my case Error: Loading chunk 9 failed.fired only in Firefox.
Caused by positive lookbehind regexp. (?<=...)
就我而言，Error: Loading chunk 9 failed.仅在 Firefox 中触发。由正回顾正则表达式引起。(?<=...)
Note that this feature is not yet supported on all browsers; use at your own discretion!
请注意，并非所有浏览器都支持此功能；自行决定使用！
回答by Vasyl Boroviak
The problem can be caused by:
问题可能由以下原因引起：
- Unstable internet connection
- Wrong/malformed browser cache
- 互联网连接不稳定
- 错误/格式错误的浏览器缓存
The only solution I found is retry the chunk load with this Webpack plugin: https://github.com/mattlewis92/webpack-retry-chunk-load-plugin
我找到的唯一解决方案是使用此 Webpack 插件重试块加载：https: //github.com/mattlewis92/webpack-retry-chunk-load-plugin
It will:
它会：
- Retry loading the chunk once a second.
- Will add
?cache-bust=Xquery to avoid (probably malformed) cached JS file.
- 每秒重试一次加载块。
- 将添加
?cache-bust=X查询以避免（可能格式错误）缓存的 JS 文件。
The downside is - it reties indefinitely.
缺点是 - 它无限期地重新回归。
回答by swapnil Bhtheitroad
Just check for path which going to load your chunks file(js files). Check path of deployURL in angular.json file.
只需检查将加载块文件（js 文件）的路径。检查 angular.json 文件中 deployURL 的路径。
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "./Scripts/app",
"deployUrl": "./Scripts/app/",
"index": "app/index.html",
"main": "app/main.ts",
"polyfills": "app/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"app/favicon.ico",
"app/assets"
],
