原因分析：

• index.js 作为入口文件，属于入口起点手动配置分割代码的情况，因此会独立打包。(app.js)

• a.js 通过 import() 进行加载，属于动态导入的情况，因此会独立打出一个包。(1.js)

• vue 来自 node_modules 目录，并且大于30kb；将其从 a.js 拆出后，与 a.js 并行加载，并行加载的请求数为2，未超过默认的5；vue 拆分后，并行加载的入口文件并无增加，未超过默认的3。vue 也符合 splitChunks 的拆分条件，单独打了一个包（2.js）

理解 chunks

chunks 用以告诉 splitChunks 的作用对象，其可选值有 async、 initial 和 all。默认值是 async，也就是默认只选取异步加载的chunk进行代码拆分。这个我们在开头的例子里已经验证。这里我们通过两个例子来看一下当chunks的值为 initial 和 all 时，打包结果如何。 首先将chunks值改为 initial：

chunks: "initial"

构建结果如下：

原因分析：

当 chunks 值为 initial 时，splitChunks 的作用范围变成了非异步加载的初始 chunk，例如我们的 index.js 就是初始化的时候就存在的chunk。而 vue 模块是在异步加载的chunk a.js 中引入的，所以并不会被分离出来。

chunks 仍使用 initial, 我们对 index.js 和 a.js 稍作修改：

// index.js
import 'vue'
import('./a')

// a.js
console.log('a')

构建结果如下：

原因分析：

vue 在 index.js 直接被引入，而 index.js 是初始chunk，所以分离出来打到了 vendors~app.js 中。

能不能让 splitChunks 既处理初始chunk也处理异步chunk呢？答案是可以，只需要将 chunks 改为 all ：

chunks: "all"

对 index.js 和 a.js 稍作修改：

// index.js
import 'vue-router'
import('./a')

// a.js
import 'vue'
console.log('a')

构建结果如下：

原因分析：

chunks 值为 all 时，splitChunks 的处理范围包括了初始chunk和异步chunk两种场景，因此 index.js 中的 vue-router 被分拆到了 vendors~app.js 中，而异步加载的chunk a.js 中的 vue 被分拆到了 3.js 中。推荐在开发中将 chunks 设置为 all。

理解 maxInitialRequests

maxIntialRequests 表示 splitChunks 在拆分chunk后，页面中需要请求的初始chunk数量不超过指定的值。所谓初始chunk，指的是页面渲染时，一开始就需要下载的js，区别于在页面加载完成后，通过异步加载的js。

对 splitChunks 做以下修改，其他使用默认配置：

chunks: 'initial',
maxInitialRequests: 1

对 index.js 稍作修改：

// index.js
import 'vue'

构建结果如下：

原因分析：

因为 maxInitialRequests 为1，如果 vue 从 index.js 中拆出的话，新创建的chunk作为初始chunk  index.js 的前置依赖，是需要在页面初始化的时候就先请求的。那么初始化时的请求数变成了2，因此不满足拆分条件，所以 splitChunks 没有对 index.js 进行拆分。

理解 maxAsyncRequests

与 maxInitialRequests 相对，maxAsyncRequests 表示 splitChunks 在拆分chunk后，并行加载的异步 chunk 数不超过指定的值。

对 splitChunks 做以下修改，其他使用默认配置：

maxAsyncRequests: 1

对 index.js 稍作修改：

// index.js
import('./a')

// a.js
import 'vue'
console.log('a')

构建结果如下：

原因分析：因为 maxAsyncRequests 为1，由于 a.js 是通过 import() 异步加载的，此时并行的异步请求数是1。如果将 vue 从 a.js 中拆出的话，拆出的包也将成为一个异步请求chunk。这样的话，当异步请求 a.js 的时候，并行请求数有2个。因此，不满足拆分条件，所以 splitChunks 没有对 a.js 进行拆分。