一、 cacheGroups是什么,有什么用?
在Webpack 5中,cacheGroups是用于配置代码拆分的规则,它可以帮助你更细粒度地控制生成的代码块。
作用:
- 将依赖项(第三方库)从应用代码中抽离出来,提高构建速度。
- 将应用代码按照自定义的规则拆分成不同的代码块,实现按需加载,减小初始加载的文件大小。
二、怎么使用cacheGroups?
具体用法:
在webpack.config.js中的optimization.splitChunks.cacheGroups对象中配置:
module.exports = {
// ...其他配置
optimization: {
splitChunks: {
cacheGroups: {
group1: {
test: /pattern/, //用于匹配模块的正则表达式。
name: 'group1',// 指定生成的代码块的名称
chunks: 'initial',//指定应该包含哪些类型的代码块。可选值有`initial`(初始代码块)、`async`(按需加载的代码块)和`all`(所有代码块)
enforce: true //设置为true时,强制生成该代码块,即使它可能已经满足了其他的缓存组规则
},
group2: {
test: /pattern/,
name: 'group2',
chunks: 'all',
enforce: true
},
// 其他没有写的配置会使用上面的默认值
default: {
minSize: 0, // 我们定义的文件体积太小了,所以要改打包的最小文件体积
minChunks: 2,//至少被引用的次数,满足条件才会代码分割
priority: -20,// 权重(越大越高,可以为负数)
reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
},
}
}
}
}
具体参数解释:
test
: 用于匹配模块的正则表达式。name
: 指定生成的代码块的名称。chunks
: 指定应该包含哪些类型的代码块。可选值有initial
(初始代码块)、async
(按需加载的代码块)和all
(所有代码块)。enforce
: 设置为true时,强制生成该代码块,即使它可能已经满足了其他的缓存组规则。
通过合理配置cacheGroups,可以根据项目需求将代码拆分成不同的块,提高构建速度和应用的加载性能。
三、cacheGroups实际应用之一
vue项目可以使用cacheGroups抽离一些公共模块,比如layouts(项目页面框架),elementUI或者其他ui组件库,vue,以及都会分离的libs(node_modules目录模块),这里我举例说明的是对 libs 的配置项。
libs: {
name: "chunk-libs",//指定了该cacheGroup输出的chunk的名称
test: /[\\/]node_modules[\\/]/,//表示只有当模块来自于node_modules目录时,才会被打包到该chunk中
priority: 10, // 权重最低,优先考虑前面内容
chunks: "initial",//"initial"表示只将初始的chunk(即入口chunk)打包到该cacheGroup中
},
在Webpack 5中,cacheGroups是用于配置优化代码分割的选项之一。这段代码定义了一个名为"libs"的cacheGroup。
- name: "chunk-libs"指定了该cacheGroup输出的chunk的名称。
- test: /[\/]node_modules[\/]/表示只有当模块来自于node_modules目录时,才会被打包到该chunk中。
- priority: 10指定了该cacheGroup的优先级,值越大,优先级越高。这意味着其他cacheGroup中定义的规则优先级低于该规则,所以在判断模块属于哪个cacheGroup时,会先考虑该规则。
- chunks: "initial"表示只将初始的chunk(即入口chunk)打包到该cacheGroup中。
综上所述,这段代码的作用是将来自于node_modules目录且属于初始chunk的模块打包到一个名为"chunk-libs"的chunk中,并且该cacheGroup具有最低的优先级(权重最低),优先考虑其他cacheGroup中的规则。