原因分析：
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 进行拆分。
