Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起。
CommonsChunkPlugin 能解决的问题
在使用插件前,考虑几个问题:
- 对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置
- common chunk 是否异步,这决定了 async 怎么配置
- common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置
以下是官方给出的常用的场景:
- 提取两个及两个以上 Chunk 的公共代码
- 将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk
- 将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
- 提取某个类似 jquery 或 react 的代码库
前面我们实现了 多页面分离资源引用,按需引用JS和css
但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。
方式一,传入字符串参数
new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var webpack = require( 'webpack' );
var extractTextPlugin = require( 'extract-text-webpack-plugin' );
module.exports = {
entry:
{
'main' : './src/main.js' ,
'user' :[ './src/login.js' , './src/reg.js' ],
'index' :[ './src/index.js' ]
},
externals:{
'jquery' : 'jQuery'
},
module:{
loaders:[
{test:/.css$/,loader:extractTextPlugin.extract( 'style' , 'css' )}
],
},
output:{
path: __dirname+ '/build/js' ,
filename: '[name].js'
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+ '/build/html/login-build.html' ,
template:__dirname+ '/src/tpl/login.html' ,
inject: 'body' ,
hash: true ,
chunks:[ 'main' , 'user' , 'common.js' ]
}),
new HtmlWebpackPlugin({
filename: __dirname+ '/build/html/index-build.html' ,
template:__dirname+ '/src/tpl/index.html' ,
inject: 'body' ,
hash: true ,
chunks:[ 'index' , 'common.js' ]
}),
new extractTextPlugin( "[name].css" ),
new webpack.optimize.CommonsChunkPlugin( 'common.js' ),
]
};
|
方式二,有选择的提取公共代码
1
2
3
4
|
new webpack.optimize.CommonsChunkPlugin( 'common.js' ,[ 'main' , 'index' ]),
|
方式三,有选择性的提取(对象方式传参)
推荐
1
2
3
4
|
new webpack.optimize.CommonsChunkPlugin({
name: 'common' ,
chunks:[ 'main' , 'user' , 'index' ]
}),
|
通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js
https://segmentfault.com/a/1190000012828879(详解commonsChunkPlugin)