在不明白CommonsChunkPlugin的使用情况下,直接上手webpack4的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。
下面给出webpack3 和webpack4下的处理
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
路漫漫其修远兮,吾将上下而求索
2026-05-19栏目: 教程
-
Kerberos使用OpenLDAP作为backend
2026-05-19栏目: 教程
-
如何访问 redis 中的海量数据?避免事故产生
2026-05-19栏目: 教程
-
Serverless Kubernetes全面升级2.0架构:支持多命名空间、RBAC、CRD、PV/PVC等功能
2026-05-19栏目: 教程
-
6个常见的高并发缓存问题,你知道几个?
2026-05-19栏目: 教程
