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

Question

我正在寻找有关webpack中这两个选项之间差异的明确解释。我已阅读说明here但差异尚不清楚。引用说明：

  

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

Answer 1

all意味着将同时选择动态导入的模块和静态导入的模块进行优化。 initial表示将仅选择静态导入的模块进行优化。

引用Webpack's documentation：

  

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

Answer 2

尝试进行最简单的解释：

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

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

这是将被编译和捆绑的文件。 现在看看不同的优化类型如何对待它。

asyn ：（默认）

将创建两个文件。
1. bundle.js（包括app.js + my-statis-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）

“ 所有”将具有最小的整体大小。