reactjs - 如何使用 React 和 Webpack 定义（真实的）代码分割点？

Question

我有一个 React 应用程序，它有一些非常大的依赖项，但只在几个页面上使用，所以我现在想将它们拆分成单独的包（块）并使用动态导入加载它们。

我的目标是在代码库中定义某些点，Webpack 应该在这些点将一侧专用的所有内容移动到另一侧。但我不能让它这样做。

让我从头开始。在没有任何额外配置或动态导入的情况下，Webpack 已经将我的代码拆分为几个块，可能是因为已达到自动代码拆分的阈值：

File sizes after gzip:

  326.4 KB             build/static/js/2.645b7d9f.chunk.js      <-- some large dependencies already split off
  266.8 KB (+9.72 KB)  build/static/js/main.73cb0e8a.chunk.js
  784 B (-428 B)       build/static/js/runtime-main.dfdb9552.js
  337 B                build/static/css/main.6aa17999.chunk.css

这对我一点帮助都没有，因为我想在延迟加载大块时显示进度指示器，并且只有在我自己控制Promises 时才有效。

所以我通过设置禁用了自动块分割。这给了我一大块和两个不打扰我的小标准块：optimization.splitChunksfalse

File sizes after gzip:

  591.93 KB (+325.13 KB)  build/static/js/main.8b66005b.chunk.js
  784 B                   build/static/js/runtime-main.dfdb9552.js
  337 B                   build/static/css/main.6aa17999.chunk.css

现在我添加了一个Dynamic Import，瞧，Webpack 为它创建了命名的块，“几乎”如预期的那样：

  583.29 KB (-8.64 KB)  build/static/js/main.e1a7e462.chunk.js
  10.18 KB              build/static/js/upload.f16a28d9.chunk.js
  1.18 KB (+426 B)      build/static/js/runtime-main.609ffa10.js
  337 B                 build/static/css/main.6aa17999.chunk.css

该import()语句位于按钮处理程序中，我希望 Webpack 现在将处理此特定按钮单击所需的所有重依赖项移动到一个大块中。但是生成的块只有 10 kb 大小，而不是我在 Bundle Analyzer 中期望的 300 kb。（它清楚地向我展示了按钮处理程序是一个关键的连接。）

所以我想：也许我们确实需要某种自动分块逻辑。但是在恢复 Chunk Splitting defaults后，显式创建的 chunk 保持 10 kb；依赖关系现在转移到一个名为“3”的块中，大小为 300kb，再次由 Webpack 控制：

  326.37 KB               build/static/js/3.301c2a98.chunk.js
  257.08 KB (-326.21 KB)  build/static/js/main.2c6d68b0.chunk.js
  10.18 KB                build/static/js/upload.28a98a8d.chunk.js
  1.18 KB (-1 B)          build/static/js/runtime-main.ae96c043.js
  337 B                   build/static/css/main.6aa17999.chunk.css

老实说，我不介意将整个工作留给 Webpack，但我至少需要访问基于事件的 API，该 API 会在获取额外块或完成加载时通知我，以便我可以显示某种指示在我的应用程序中。

标签： reactjswebpacklazy-loading