本文详解如何在Webpack 4中使用splitChunks从指定入口文件提取公共代码。通过对比Webpack 3的CommonsChunkPlugin，演示如何配置minChunks和chunks函数，实现多层级公共模块（如common1、common2及最终common3）的提取与复用，解决多入口打包冗余问题。
Webpack splitChunks 配置背景与目标
在尚未掌握CommonsChunkPlugin用法的情况下，直接上手Webpack 4的splitChunks配置确实颇具挑战。为了更深入地理解splitChunks的实际应用，必须通过具体案例进行练习，才能从中获得实质性的收获（以下示例暂不考虑实际业务场景）。
从指定入口文件中提取公共文件
CommonsChunkPlugin的实现：
entry: {
index:'./src/index.js',
index1:'./src/index1.js',
index2:'./src/index2.js'
},
plugins: [
new CommonsChunkPlugin({
name:"common1",
chunks:['index','index1','index2']
})
]其中index、index1以及index2均作为打包的入口文件。
从指定入口提取公共代码的实现
splitChunks的具体实现方式如下：
optimization: {
splitChunks: {
chunks:"all",
minSize: 0,
cacheGroups: {
common: {
minChunks: 3,
priority: -1,
name:'common',
chunks (chunk) {
// exclude `my-excluded-chunk`
return ['index','index1','index2'].includes(chunk.name);
}
}
}
}
}
在cacheGroups下定义一个名为common的配置项。通过chunks函数指定三个入口文件为'index'、'index1'和'index2'，同时设置minChunks为3，这意味着从这三个入口文件中提取出的公共文件，必须至少被这三个不同的入口文件引用。因此，该配置旨在从三个入口文件中提取公共代码。
多层级公共代码的提取逻辑
从两个公共文件中，再提取公共部分
首先解释这一概念的含义：
- 存在6个公共文件，分别标记为a、b、c、d、e、f。
- 从a、b、c中提取其公共部分x，同时从d、e、f中提取公共部分y。
- 接着，从x和y中再次提取公共部分z。
下面给出Webpack 3和Webpack 4环境下的处理方案。
Webpack 3与4的配置对比
CommonsChunkPlugin的实现方式如下：
new CommonsChunkPlugin({
name:"common1",
chunks:['index','index1','index2']
}),
new CommonsChunkPlugin({
name:"common2",
chunks:['app','app1','app2']
}),
new CommonsChunkPlugin({
name:"common3",
chunks:['common1','common2']
})
配置逻辑清晰：首先从'index'、'index1'、'index2'中提取公共文件'common1'，接着从'app'、'app1'、'app2'中提取公共文件'common2'，最后从'common1'和'common2'中再次提取公共文件common3。
splitChunks的实现方式如下：
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks:"all",
minSize: 0,
cacheGroups: {
common3: {
minChunks: 6,
priority: 1,
reuseExistingChunk: true
},
common2: {
minChunks: 3,
priority: -2,
name:'common2',
chunks (chunk) {
// exclude `my-excluded-chunk`
return ['app','app1','app2'].includes(chunk.name);
}
},
common1: {
priority: -1,
name: 'common1',
minChunks: 3,
enforce: true,
chunks (chunk) {
return ['index','index1','index2'].includes(chunk.name);
}
}
}
}
}
由于未在官方文档中找到关于“提取公共文件后再进行处理”的直接方法说明，因此采用了另一种替代方案：
- 首先从6个文件中提取出公共文件，即common3（它是common1和common2的公共部分）。
- 从'index'、'index1'、'index2'中提取common1。
- 从'app'、'app1'、'app2'中提取common2。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。