Webpack：optimization.splitChunks.chunks 中的“all”和“initial”选项有啥区别

Posted 2023-02-22

【中文标题】Webpack：optimization.splitChunks.chunks 中的“all”和“initial”选项有啥区别

【英文标题】：Webpack: What is the difference between "all" and "initial" options in optimization.splitChunks.chunksWebpack：optimization.splitChunks.chunks 中的“all”和“initial”选项有什么区别

【发布时间】：2018-10-12 02:57:31

【问题描述】：

我正在寻找关于 webpack 中这两个选项之间区别的清晰解释。我已经阅读了here 的描述，但区别并不清楚。引用描述：

将 optimization.splitChunks.chunks 选项设置为“所有”初始块将受到它的影响（即使是那些未动态导入的块）。这样，块甚至可以在入口点和按需加载之间共享。

【参考方案1】：

all 表示将选择动态导入的模块和静态导入的模块进行优化。 initial 表示只选择静态导入的模块进行优化。

引用Webpack's documentation:

可能的值是 all、async 和 initial。提供所有功能可能特别强大，因为这意味着即使在异步和非异步块之间也可以共享块。

【参考方案2】：

尝试最简单的解释。这是将被转译和捆绑的文件：

//app.js
import "my-static-module";

if(some_condition_is_true)
  import ("my-dynamic-module")

console.log("My app is running")

现在看看不同的优化类型将如何处理它。

异步（默认）：

将创建两个文件。

bundle.js（包括 app.js + my-static-module） chunk.js（仅包括 my-dynamic-module）

初始：

将创建三个文件

app.js（仅包括 app.js） bundle.js（仅包括 my-static-module） chunk.js（仅包括 my-dynamic-module）

全部：

将创建两个文件

app.js（仅包括 app.js） bundle.js（包括 my-static-module + my-dynamic-module）

“all”的整体尺寸最小。

【讨论】：

这是迄今为止我找到的最简单的解释。谢谢