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

Question

我正在寻找Webpack中这两个选项之间差异的清晰解释。我已经阅读了这里的描述，但是差异不清楚。引用该描述：

将optimization.splitChunks.chunks选项设置为"all"，初始块将受到影响（即使没有动态导入）。这样，代码块甚至可以在入口点和按需加载之间共享。

- quantdaddy

Answer 1

尝试提供最简单的解释。这就是将要转换和捆绑的文件：

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

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

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

async（默认）：

将创建两个文件。

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

initial：

将创建三个文件

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

all：

将创建两个文件

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

"all"将具有最小的总大小。

- Sujaan Singh

---

这是我目前找到的最简单的解释。谢谢。 - Laode Muhammad Al Fatih

Answer 2

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

引用自Webpack文档:

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

- dbird

Answer 3

扩展@Sujaan Singh分享的示例，考虑splitChunks.minSize等于零。

这些是将被转译和捆绑的文件：

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

import "my-static-vendor-module"

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

//my-dynamic-module.js
import "my-static-module-1";

//my-dynamic-module-1.js
import "my-static-module-1";

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

async（默认）：

将创建四个文件。

1. app.js（包括app.js + my-static-module + my-static-vendor-module）
2. 0.app.js（仅包括my-dynamic-module）
3. 1.app.js（仅包括my-dynamic-module-1）
4. 2.app.js（仅包括my-static-module-1）：因为此模块对两个异步块都是公共的

all：

将创建五个文件

1. app.js（仅包括app.js + my-static-module）
2. 0.app.js（仅包括my-static-vendor-module-1）：默认情况下，供应商模块的minChunks为1
3. 1.app.js（仅包括my-dynamic-module）
4. 2.app.js（仅包括my-dynamic-module-1）
5. 3.app.js（仅包括my-static-module-1）

initial：

将创建四个文件

1. app.js（仅包含app.js + my-static-module）
2. 0.app.js（包含my-static-vendor-module-1）：对于供应商模块，默认的minChunks是1
3. 1.app.js（仅包含my-dynamic-module + my-static-module-1）
4. 2.app.js（包含my-dynamic-module-1 + my-static-module-1）

SplitChunksPlugin使用的默认缓存组：

default: {
    idHint: "",
    reuseExistingChunk: true,
    minChunks: 2,
    priority: -20
},
defaultVendors: {
    idHint: "vendors",
    reuseExistingChunk: true,
    test: NODE_MODULES_REGEXP,
    priority: -10
}

- Cobra Crowe