1、为什么要抽离公共代码
在多入口文件的情况下,如果在每个入口文件中都引入了相同的模块,那么打包时,就会将这个模块重复打包进去,这是没有必要的。
2、为什么要抽离第三方代码
每次更改了自己的代码,重新打包,生成了新的hash文件名,而第三方包(如lodash)并没有改变,不需要重新打包。
3、配置optimization下的splitChunks项
开发环境下没有必要抽离
webpack.common.js和webpack.dev.js没有改动
webpack.prod.js改动
optimization和plugins平级
1、chunks共有三个选项值
一般情况下用all
chunk理解为是一段代码(代码块)
- initial 入口 chunk,对于异步导入的文件不处理
- async 异步 chunk,只对异步导入的文件处理
- all 全部 chunk,同步、异步都处理
optimization: {
// 分割代码块
splitChunks: {
chunks: 'all',
// 缓存分组
cacheGroups: {
// 第三方模块
vendor: {
name: 'vendor', // chunk 名称
priority: 1, // 权限更高,优先抽离,重要!!!
test: /node_modules/,
minSize: 0, // 大小限制,最小多大,就抽离出来,为了防止一些比较小的模块被单独抽离出来,反而浪费资源
minChunks: 1 // 最少复用过几次,就抽离出来
},
// 公共的模块
common: {
name: 'common', // chunk 名称
priority: 0, // 优先级
minSize: 0, // 公共模块的大小限制
minChunks: 2 // 公共模块最少复用过几次
}
}
}
}
4、配置HtmlWebpackPlugin插件
chunks项,是一个数组,表示这个入口下要引用哪些chunk,chunk的名字就是上面抽离时定义的name
plugins: [
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index', 'vendor', 'common'] // 要考虑代码分割
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other', 'common'] // 考虑代码分割
})
]