今天学了webpack的提取公共代码。记录一下:
为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。
这里要用到两个插件:
- commonChunkPlugin
- webpack.optimize.commonsChunkPlugin
- 配置:plugins:[new webpack.optimize.commonsChunkPlugin(option)]
- option里面是一个json,配置如下
- options.name: chunk的名称
- options.filename: 公用代码打包后的名称
- options.minChunks: 可以是数字、函数、特殊字符
- options.chunks: 提取代码范围
- options.children
- options.deepChildren
- options.asyne
使用场景:单页面应用,单页面应用+第三方依赖,多页面应用+第三方以来+代码生成
继续创建文件,且npm init初始化
pageA 依赖subPageA,subpageB,lodash
import
'./subpageA.js'
;
import
'./subPageB'
;
import
*
as
_
from
'lodash'
;
export
default
'pageA'
;
import
'./moduleA'
export
default
'subpageA'
;
subpageB也依赖moduleA
import
'./moduleA'
export
default
'subpageB'
;
webpack.config.js配置如下:
var
webpack
=
require
(
'webpack'
);
var
path
=
require
(
'path'
);
module
.
exports
=
{
entry:
{
pageA:
'./src/pageA'
},
output:
{
path:
path
.
resolve
(
__dirname
,
'dist'
),
filename:
'[name].bundle.js'
},
plugins:
[
new
webpack
.
optimize
.
CommonsChunkPlugin
({
name:
'common'
,
minChunks:
2
,
// chunks: ['moduleA', 'moduleB']
})
]
}
命令行输入webpack打包。
这时候,就会生成文件如下:
这时候公共代码就被打包了。
可是针对多entry单页面是不能打包的,在src中新增加一个pageB
代码如下;
import
'./subpageA'
;
import
'./subPageB'
;
import
*
as
_
from
'lodash'
;
export
default
'pageB'
;
webpack.config.js代码如下
var
webpack
=
require
(
'webpack'
);
var
path
=
require
(
'path'
);
module
.
exports
=
{
entry:
{
pageA:
'./src/pageA'
,
pageB:
'./src/pageB'
,
vender:
[
'lodash'
]
},
output:
{
path:
path
.
resolve
(
__dirname
,
'dist'
),
filename:
'[name].bundle.js'
,
chunkFilename:
'[name].chunk.js'
},
plugins:
[
new
webpack
.
optimize
.
CommonsChunkPlugin
({
name:
'common'
,
minChunks:
2
,
// 选择提取moduleA和moduleB的公共代码
chunks:
[
'moduleA'
,
'moduleB'
]
}),
new
webpack
.
optimize
.
CommonsChunkPlugin
({
name:
[
'vender'
,
'mainfest'
],
minChunks:
Infinity
})
]
}
这样配置,就可以把第三方的lodash、公共代码都提取了。
打包结果如下:
到此,结束。