本文主要是介绍webpack学习之4.代码分离 SplitChunksPlugin，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
代码分离可以解决下面几个问题：
- 去重：当一个公共模块被多个入口使用时，每个入口打包后的文件都会包含这个模块的代码。
- 长缓存：一个不会经常改动的模块，例如第三方库(vendor)，可以单独生成减少客户端重复加载。
- 懒加载：当对一个模块懒加载（异步），webpack会将这个模块作为一个。（默认行为，不需要手动配置）
- css分离：将css从js中分离，以link方式在head中加载。（前面文章已学习）
SplitChunksPlugin
最初，webpack 使用 CommonsChunkPlugin 避免重复的依赖。
从webpack 4开始，使用 SplitChunksPlugin 代替 CommonsChunkPlugin 。
SplitChunksPlugin 可以对模块优化包括提取模块到一个单独的文件、合并公共模块到一个单独的文件等。
SplitChunksPlugin 是webpack开箱即用的插件，不需要单独安装。
默认情况下只对按需块（异步块）有影响： chunks:‘async’ 。
optimization.splitChunks 对象用于配置 SplitChunksPlugin。默认配置如下：
// webpack.config.js
module.exports = {//...optimization: {splitChunks: {// chunks 表明将选择哪些块进行优化。 可以设置为：字符串 或 function[(chunk)=>Boolean]// 字符串有效值：async(默认值)、all和initial。// 回调函数：模块名作为参数传入的回调函数，返回Boolean表明是否优化chunks: 'async',// 当模块大小（压缩前）大于minSize才会被提取minSize: 30000,// webpack 5新增，避免提取了大小为0的模块。开发模式默认为0，其他默认为minSize。一般不用修改minRemainingSize: 0,// 告诉webpack提取的模块应尽量不大于maxSize。否则在允许继续拆分的基础上，继续拆分为碎片。// 碎片大小范围应在 minSize ~ maxSize。maxSize: 0,// 至少被minChunks个块(chunk)使用的模块，才会被提取。值>=1minChunks: 1,// 按需加载时的最大并行请求数。maxAsyncRequests: 6,// 入口点的最大并行请求数。maxInitialRequests: 4,// 默认情况下，webpack将使用块的来源和名称生成名称（例如vendor〜main.js）。// automaticNameDelimiter 使您可以指定用于生成名称的连接符。automaticNameDelimiter: '~',// 为提取的块命名。可设置为 true(默认值) Boolean String Function[(module,chunks,cacheGroupKey)=>String]name: true,// 为提取的块设置名称前缀automaticNamePrefix: '',// 缓存组，用于自定义提取公共模块的选项cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}
};
chunks
配置项 chunks 告诉 webpack 优化哪些模块或以何种方式（异步/非异步）加载的模块。
异步加载/懒加载：例如使用import()方式加载的模块，import返回一个promise。
非异步：例如使用import ‘vue’ 直接加载的。
示例
入口文件：
// ./src/a.js
import 'react'; // 非异步
import('lodash'); // 异步
import('vue'); // 异步// ./src/b.js
import 'react'; // 非异步
import('lodash'); // 异步
import 'vue'; // 非异步
// webpack.config.js
module.exports = {entry: {a: [ './src/a.js'],b: [ './src/b.js'],},optimization: {splitChunks: {chunks: "async",// 'async'(默认值) 'initial' 'all' Function}}// ...
}
async 打包结果
生成2个chunk（有一个是webpack的，buildin/global.js，忽视它）
一个包含了a/b异步加载的lodash
一个包含了a异步加载的vue
生成的a.js b.js
a中包含了非异步加载的react
b中包含了非异步加载的react 和 vue
瑕疵：
1.非异步加载的公共模块react没有被优化
2.只提取了异步加载的vue，非异步加载的vue仍然被重复打包
initial 打包结果
生成了3个chunk
一个包含了a异步加载的vue
一个包含了a异步加载的lodash
一个包含了b异步加载的lodash
生成了2个vendors
一个包含了a/b非异步加载的react
一个包含了b非异步加载的vue
webpack会将异步加载的模块，单独提取。《webpack学习之1.基础配置》 中chunk的两个来源已解释。
瑕疵：
1.异步加载的公共模块lodash被重复提取，没有合并优化
2.异步加载的vue被提取了两次。
all 打包结果
生成了2个chunk（有一个是webpack的，buildin/global.js，忽视它）
一个包含了a异步加载的vue
一个包含了a/b异步加载的lodash
生成了1个vendors
一个包含了a/b非异步加载的react
对异步和非异步加载的模块都做了优化。
函数 打包结果
module.exports = {optimization: {splitChunks: {chunks(chunk) {return ['a','b'].includes(chunk.name);},
// ...
打包结果与initial一样。
name
为提取的块命名。可设置为： true(默认值) false String 一个返回名称字符串的Function
默认值 true：将自动基于块(chunks)、模块(module)和缓存组的key (cacheGroupKey，默认vendors或default) 生成一个名称。（vendors~chunkName~moduleName.js）连接符用 automaticNameDelimiter 设置。
false：不命名（生成[数字序号].js）。生产环境，建议设置为false，避免不必要的更改名称。
字符串/函数：可以自定义名称。
// 这个函数模拟默认值true
name: function(module, chunks, cacheGroupKey) {const automaticNameDelimiter = '~';const moduleFileName = module.identifier().split('/').reduceRight(item => item);const allChunksNames = chunks.map((item) => item.name).join(automaticNameDelimiter);return `${cacheGroupKey}${automaticNameDelimiter}${allChunksNames}${automaticNameDelimiter}${moduleFileName}`;
}
1.使用字符串或始终返回相同名称的函数，会将所有模块合并为一个块，这样会增加下载量，减慢页面加载速度。
2.如果名称与入口文件名称重复，则入口文件将被删除。
cacheGroups
默认将所有来自node_modules的模块 和 至少被2个块(chunk)重复使用的模块 分配给一个称为“vendors(供应商)”的缓存组（cache group）。
可以将一个模块分配给多个缓存组。 然后，优化将优先选择具有较高优先级（优先级选项）的缓存组，或者形成较大块(chunks)的缓存组。
缓存组cacheGroups默认继承splitChunks的配置。不过 test、priority 和 reuseExistingChunk只能在缓存组中定义。
cacheGroups是一个对象，key是缓存组的名称（可在定义name的回调函数中以cacheGroupKey访问），value可以覆盖splitChunks的全局配置。
// 默认配置
cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10 // 缓存组优先级},default: {minChunks: 2,priority: -20,reuseExistingChunk: true // 是否重用已提取的块}
}
cacheGroups默认配置两个缓存组：
- vendors 供应商组 用于配置来自node_modules的第三方模块。
- default 默认组 用于配置重复使用的模块。
它们的优先级(priority)都为负，以允许任何自定义的缓存组获得更高的优先级。（优先级选项默认为0）
可通过设置为false禁用默认的缓存组。
// 禁用默认配置
cacheGroups: {vendors: false,default: false
}
参数说明
| 参数 | 默认值 | 描述 |
|---|---|---|
| priority | number | 缓存组优先级，可设置为负 |
| reuseExistingChunk | boolean | 是否重用已提取的块 |
| test | function|RegExp|string | 匹配模块，设置string时，将匹配该块中所有的模块 |
| type | function|RegExp|string | 按文件类型匹配模块 |
| name | boolean|string|function | 为提取的块命名 |
| filename | function|string | 块文件输出路径和名称。 当且仅当它是初始块时，才允许覆盖文件名。 可以使用在output.filename中可用的所有占位符。 也可以在splitChunks.filename中全局设置此项，但不建议这样做，如果splitChunks.chunks未设置’initial’，可能会导致错误。 |
| enforce | boolean | 告诉webpack忽略splitChunks.minSize，splitChunks.minChunks，splitChunks.maxAsyncRequests和splitChunks.maxInitialRequests选项，并始终为此缓存组创建块。 |
| 其他继承的参数 | - | automaticNameDelimiter automaticNameMaxLength automaticNamePrefix chunks maxAsyncRequests maxInitialRequests maxSize minChunks minSize |
chunkFilename chunkhash 缓存
output.chunkFilename用于定义chunk文件的输入路径和名称。
[chunkhash]占位符表示chunk的哈希。
使用 hash 当项目中某个模块发生变化，重新打包，hash就会更新。
使用 chunkhash 当项目中某个模块发生变化，重新打包，hash不会更新，变化的模块的chunkhash会更新。
splitChunksPlugin配合chunkhash可以令打包后生成的文件，仅变更被修改过的模块的文件名。
// webpack.config.js
module.exports = {output:{//...filename: '[name].[chunkhash].js',chunkFilename: '[id].[chunkhash].js'}
}
参考
SplitChunksPlugin | Webpack
这篇关于webpack学习之4.代码分离 SplitChunksPlugin的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
