webpack学习之4.代码分离 SplitChunksPlugin

代码分离可以解决下面几个问题：

1. 去重：当一个公共模块被多个入口使用时，每个入口打包后的文件都会包含这个模块的代码。
2. 长缓存：一个不会经常改动的模块，例如第三方库(vendor)，可以单独生成减少客户端重复加载。
3. 懒加载：当对一个模块懒加载（异步），webpack会将这个模块作为一个。（默认行为，不需要手动配置）
4. 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)使用的模块，才会被提取。值>=1
      minChunks: 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默认配置两个缓存组：

1. vendors 供应商组 用于配置来自node_modules的第三方模块。
2. 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