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

Question

我正在寻找有关 webpack 中这两个选项之间区别的明确解释。我已阅读此处的说明，但区别尚不清楚。引用描述：

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

Answer 1

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

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

if(some_condition_is_true){
  import ("my-dynamic-module")
}
console.log("My app is running")

现在看看不同的优化类型将如何对待它。

异步（默认）：

将创建两个文件。

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

最初的：

将创建三个文件

1. app.js（仅包含 app.js）
2. bundle.js（仅包含 my-static-module）
3. chunk.js（仅包含 my-dynamic-module）

全部：

将创建两个文件

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

“ all ”将具有最小的整体尺寸。

Answer 2

all意味着将选择动态导入的模块和静态导入的模块进行优化。initial意味着只会选择静态导入的模块进行优化。

引用Webpack 的文档：

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