Webpack - 加载块 0 失败答案

【问题标题】：Webpack - Loading chunk 0 failedWebpack - 加载块 0 失败
【发布时间】：2018-02-13 13:23:10
【问题描述】：

我的一些用户收到此错误：

未处理的拒绝消息：“加载块 0 失败”堆栈：正在加载块 0 在 HTMLScriptElement.n 处失败

问题是，我没有成功复制它。而且我这个错误已经有一段时间了。

同一用户每次进入网站时都会发生这种情况。但仅限于其中一些人。但是，他们都使用Win7 + Chrome 60，因此与浏览器无关。

我在网上找不到任何关于这个特定错误的信息。另外我没有使用react-router，我使用react。

有什么想法还有什么问题吗？

这可能是由与某些安全相关的原因引起的吗？

我正在使用 webpack 2.6.1 和 CommonsChunkPlugin 为我的供应商创建块。

其中一位用户的用户代理收到错误：

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, 像壁虎）Chrome/60.0.3112.113 Safari/537.36

【问题讨论】：

也许您的用户正在使用阻止请求的扩展程序或防火墙？
也许，我也在想，因为 webpack 实际上是在做jsonp - script src injection，如果用户有一些高安全设置，那么它就会被阻止。（虽然它是同一个域）或一些防火墙..
我遇到了同样的问题，但是在使用动态导入（和命名的块）时。无法复制，但少数用户会定期收到此错误。
@Jakemmarsh 看到我的回答，你可以在 webpack 中支持我的问题

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

这样做的原因是因为我使用require.ensure 与创建块的webpack 并使用jsonp 按需添加此脚本，换句话说，它将脚本src 标签添加到带有创建的块文件的html。

似乎有些用户有扩展甚至某些配置来阻止此类jsonp 请求，无论它是否是同一个域。

一个解决方案是完全不使用require.ensure，或者使用错误回调来处理这种情况。

另外正在寻找一种 webpack 将使用 xhr + eval 加载脚本的方法，这将防止这种情况。我刚刚找到了这个 npm 模块：https://github.com/elliottsj/xhr-eval-chunk-webpack-plugin，但我希望它会得到 webpack 本身的更多支持。

我为此打开了一个问题：https://github.com/webpack/webpack/issues/5630，希望能看到一些进展。

【讨论】：

【解决方案2】：

从谷歌搜索的答案：

就我而言，Error: Loading chunk 9 failed. 仅在 Firefox 中触发。由积极的后向正则表达式引起。 (?<=...)

请注意，并非所有浏览器都支持此功能；自行决定使用！

【讨论】：

【解决方案3】：

问题可能是由以下原因引起的：

互联网连接不稳定
浏览器缓存错误/格式错误

我找到的唯一解决方案是使用这个 Webpack 插件重试块加载：https://github.com/mattlewis92/webpack-retry-chunk-load-plugin

它会：

每秒重试一次加载块。
将添加?cache-bust=X 查询以避免（可能是格式错误的）缓存的 JS 文件。

缺点是 - 它无限期地重新绑定。

【讨论】：

【解决方案4】：

只需检查要加载块文件（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"
      ],

【讨论】：

【解决方案5】：

如果您使用 Cloudflare 或 Web 服务器的任何 CDN 主机，请尝试清除缓存，因为这可能是由旧版本应用程序的缓存引起的。由于新版本与旧版本不对应，因此失败。

【讨论】：