如果要彻底明白 Webpack如何抽取公共代码，就要设计一个场景来支持抽取公共代码的多种形式，能够从代码运行的结果中查看实际的效果，从效果中深入理解各个参数的作用。
场景设计
在设计场景之前，首先要明白公共代码抽取常见的几种情况：
抽取 Webpack 运行时代码
直接加载的代码抽取（静态引入）
node_modules 中的代码
项目中的业务代码
按需加载的代码抽取（动态引入）
node_modules 中的代码
项目中的业务代码
经过分析会发现，现在常见的场景就五种，设计一个应用场景包含这五种情况，就可以很好的理解 Webpack如何抽取公共代码了。
设计场景如下：
其中带有 ~ 的表示是动态引入
module 是一个独立的功能模块，chunk 是很多 module 打包的结果，bundle 是很多 chunk 最后生成的结果
打包入口动态和静态导入的模块：
入口模块A模块B模块C模块D
pageAmoduleAmoduleBmoudleCmoudleD~
pageBmoduleAmoduleBmoudleC~moudleD~
pageCmoduleAmoduleB~moudleC~moudleD~
pageDmoduleA~moduleB~moudleC~moudleD~
模块中动态和静态导入的 node_modules 中的模块：
模块reactvuelodashjquery
moduleAreactvuelodashjquery~
moduleBreactvuelodash~jquery~
moduleCreactvue~lodash~jquery~
moduleDreact~vue~lodash~jquery~
入口文件中的代码（以 pageA.js 为例，其他的入口文件中的代码类似）：
import './module/moduleA';
import './module/moduleB';
import './module/moduleC';
import('./module/moduleD');
console.log('pageA');
模块中的代码（以 moduleA.js 为例，其他的模块文件中的代码类似）：
import 'react';
import 'vue';
import 'lodash';
import('jquery');
console.log('moduleA');
export default 'moduleA';
最终打包之后的预期效果：
node_modules 的按需加载模块在一个 chunk 中，包含 react、vue、lodash、jquery
node_modules 的直接加载的模块在一个 chunk 中，包含 react、vue、lodash
项目中按需加载的模块在一个 chunk 中，包含 moduleA、moduleB、moduleC、moduleD
项目中直接加载的模块在一个 chunk 中，包含 moduleA、moduleB、moduleC
有一个 Webpack 的运行时 chunk：runtime.bundle.js
import(‘react‘);
import(‘vue‘);
import(‘lodash‘);
import(‘jquery‘);
认识配置
在 Webpack 中已经提供了抽取公共代码的默认配置。
官方给出的默认配置：
module.exports = {
optimization: {
splitChunks: {
automaticNameDelimiter: '~',
name: true,
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
各个选项的说明：
optimization.automaticNameDelimiter：指定生成名字中的分隔符，Webpack 将使用 chunk 的名字和 chunk 的来源，如 vendors~main.js
optimization.name：分割块的名称，提供 true 会自动生成基于 chunk 和缓存组键的名称
optimization.maxAsyncRequests：按需加载时，并行请求的最大数量，默认是 5
optimization.maxInitialRequests：一个入口最大的并行请求数，默认是 3
optimization.minChunks：在分割之前，这个代码块最小应该被引用的次数，默认是 1
optimization.chunks：需要关心的属性，一般可以指定三种形式 all（全部的 chunk，包含所有类型的 chunk）、async（按需加载的 chunk） 和 initial（初始的 chunk）
optimization.minSize：需要关心的属性，一个新的 chunk 的最小体积，默认是 30000，即 30K
optimization.cacheGroups：该属性是一个对象，上面的属性可以在该对象中使用，如果在该对象中不使用，则默认继承上面的属性值
cacheGroups：是一个对象，下面的所有属性都是自定义的，一般是打包后的模块名称
cacheGroups.name：需要关心的属性，抽取公共代码的 chunk 名字
cacheGroups.priority：需要关心的属性，抽取公共代码的优先级，数字越大，优先级越高
cacheGroups.reuseExistingChunk：需要关心的属性，是否重用 chunk，如果当前块包含已经从主bundle中分离出来的模块，那么它将被重用，而不是生成一个新的模块，一般设置为 true
cacheGroups.test：需要关心的属性，匹配规则，一般使用正则表达式来匹配，如 /[\\/]node_modules[\\/]/ 是匹配 node_modules中的模块
下面的例子中主要是演示上面指出的需要关心的属性。
准备工作
为了能够更好的查看程序执行的效果，需要做以下几个准备工作。
1.创建 package.json 并安装相关依赖和指定运行的 scripts
"scripts": {
"build": "webpack --mode production"
},
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"react": "^16.4.2",
"vue": "^2.5.17"
}
2.创建 Webpack 的配置文件 webpack.config.js，并输入公共的配置内容
const { resolve } = require('path');
const webpackConfig = {};
// 入口
webpackConfig.entry = {
pageA: './src/pageA.js',
pageB: './src/pageB.js',
pageC: './src/pageC.js',
pageD: './src/pageD.js'
};
// 出口
webpackConfig.output = {
path: resolve(__dirname, './dist'),
filename: '[name].bundle.js',
// chunkFilename 的作用就是设置 chunk 的名字，抽取公共代码的时候有用
chunkFilename: "[id].[name].chunk.js"
};
// 优化相关
webpackConfig.optimization = {
splitChunks: {
automaticNameDelimiter: '~',
name: true,
maxAsyncRequests: 5,
maxInitialRequests: 3,
minChunks: 1,
minSize: 0, // 这里自定义不管文件有多小，都要抽取公共代码
cacheGroups: {}
}
};
module.exports = webpackConfig;
3.执行命令
$ yarn build
查看未抽取公共代码的效果
上面准备工作中配置的 webpack.config.js 是没有经过抽取公共代码的，执行命令之后，会发现控制台中输出下面的结果：
Asset Size Chunks Chunk Names
6.6.chunk.js 284 bytes 6 [emitted]
0.0.chunk.js 219 bytes 0 [emitted]
2.2.chunk.js 7.21 KiB 2 [emitted]
3.3.chunk.js 69.3 KiB 3 [emitted]
4.4.chunk.js 64.3 KiB 4 [emitted]
5.5.chunk.js 85.3 KiB 5 [emitted]
1.1.chunk.js 311 bytes 1 [emitted]
7.7.chunk.js 217 bytes 7 [emitted]
pageA.bundle.js 143 KiB 8, 0, 2, 3, 4, 6, 7, 12 [emitted] pageA
pageB.bundle.js 143 KiB 9, 0, 2, 3, 4, 7, 12 [emitted] pageB
pageC.bundle.js 143 KiB 10, 0, 2, 3, 4, 12 [emitted] pageC
pageD.bundle.js 2.22 KiB 11 [emitted] pageD
12.12.chunk.js 190 bytes 12 [emitted]
从上面的结果中可以看出，没有抽取公共代码，下面就逐步优化，来抽取公共代码。
抽取 Webpack 运行时代码
在抽取 Webpack 运行时代码的时候，需要指定 runtimeChunk 属性：
true：表示每个入口都抽取一个公共的运行时代码
‘single‘：表示多个入口抽取一个公共的运行时代码，一般使用这种方式
// 抽取运行时代码
webpackConfig.optimization.runtimeChunk = 'single';
执行命令之后，查看控制台：
Asset Size Chunks Chunk Names
7.7.chunk.js 284 bytes 7 [emitted]
0.0.chunk.js 219 bytes 0 [emitted]
2.2.chunk.js 7.21 KiB 2 [emitted]
3.3.chunk.js 69.3 KiB 3 [emitted]
4.4.chunk.js 64.3 KiB 4 [emitted]
5.5.chunk.js 85.3 KiB 5 [emitted]
runtime.bundle.js 2.16 KiB 6 [emitted] runtime
1.1.chunk.js 311 bytes 1 [emitted]
8.8.chunk.js 217 bytes 8 [emitted]
9.pageA.chunk.js 141 KiB 9, 0, 2, 3, 4, 7, 8, 13 [emitted] pageA
10.pageB.chunk.js 141 KiB 10, 0, 2, 3, 4, 8, 13 [emitted] pageB
11.pageC.chunk.js 141 KiB 11, 0, 2, 3, 4, 13 [emitted] pageC
12.pageD.chunk.js 328 bytes 12 [emitted] pageD
13.13.chunk.js 190 bytes 13 [emitted]
这时，会发现多了一个 runtime.bundle.js 文件，这个文件就是 Webpack 的运行时代码。
抽取公共代码
下面抽取的公共代码就只包含了四部分：项目中的静态导入、项目中的动态导入、node_modules 中的静态导入、node_modules 中的动态导入。
这四种情况，自己划分了一下优先级，可以在代码中看出来。
node_modules 中的直接加载的代码：
webpackConfig.optimization.splitChunks.cacheGroups.nodeSrc = {
name: 'nodeSrc',
reuseExistingChunk: true,
test: /[\\/]node_modules[\\/]/,
chunks: 'initial', // 指定为初始的 chunk
priority: 3
};
node_modules 中的按需加载的代码：
webpackConfig.optimization.splitChunks.cacheGroups.nodeAsync = {
name: 'nodeAsync',
reuseExistingChunk: true,
test: /[\\/]node_modules[\\/]/,
chunks: 'async', // 指定为按需加载的 chunk
priority: 2
};
项目中的直接加载的代码：
webpackConfig.optimization.splitChunks.cacheGroups.commonSrc = {
name: 'commonSrc',
reuseExistingChunk: true,
chunks: 'initial', // 指定为初始的 chunk
priority: 1
};
项目中的按需加载的代码：
webpackConfig.optimization.splitChunks.cacheGroups.commonAsync = {
name: 'commonAsync',
reuseExistingChunk: true,
chunks: 'async', // 指定为按需加载的 chunk
priority: 0
};
执行命令之后，可以看到打包之后的最终效果：
Asset Size Chunks Chunk Names
0.commonAsync.chunk.js 946 bytes 0 [emitted] commonAsync
1.nodeAsync.chunk.js 226 KiB 1, 4 [emitted] nodeAsync
2.commonSrc.chunk.js 1.22 KiB 2 [emitted] commonSrc
runtime.bundle.js 2.19 KiB 3 [emitted] runtime
4.nodeSrc.chunk.js 141 KiB 4 [emitted] nodeSrc
5.pageA.chunk.js 74 bytes 5 [emitted] pageA
6.pageB.chunk.js 74 bytes 6 [emitted] pageB
7.pageC.chunk.js 74 bytes 7 [emitted] pageC
8.pageD.chunk.js 72 bytes 8 [emitted] pageD
如果感觉这种带数字的名字查看不直观，就修改 output 中的 chunkFilename 的值为 "[name].chunk.js"。
最终经过 Webpack 打包后的代码就是预期的结果。
