webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“

最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。

——摘自 webpack

从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。

而关于 optimization.splitChunks 中的chunks，webpack 官方文档却没有很好的进行举例解释，只说明了 async 是默认的选项。

今天我们将来探讨一下这三者的区别。

单个入口文件情况

//app.js
import { findIndex } from "lodash";

if(some_condition_is_true){
  import ("dayjs").then((e) => {console.log(e)})
}

findIndex([1, 2, 3]);
console.log("My app is running");

async模式

bundle.js: lodash + app.js

async: dayjs.js

initial模式

bundle.js: app.js

1.js: lodash

async: dayjs.js

all 模式

bundle.js: app.js

1.js: lodash

async: dayjs.js

结论

在单入口的情况下 initial 和 all 模式是一样的，async 只会单独打包异步部分。

多个入口文件情况

以以下两个为例：

//a.js