明确概念
- entry的每一个入口文件都叫chunk (entry chunk)
- 入口文件的异步加载也叫chunk(children chunk)
- 通过commonChunkPlugin 抽离出来的也叫chunk(common chunk)
使用场景
- 多入口文件，需要抽出公共部分的时候。
- 单入口文件，但是因为路由异步加载对多个子chunk, 抽离子每个children公共的部分。
- 把第三方依赖，node_modules下所有依赖抽离为单独的部分。
- 混合使用，既需要抽离第三方依赖，又需要抽离公共部分。
实现部分
项目结构
image.png
// a.js
import { common1 } from './common'
import $ from 'jquery';
console.log(common1, 'a')
//b.js
import { common1 } from './common'
import $ from 'jquery';
console.log(common1, 'b')
//common.js
export const common1 = 'common1'
export const common2 = 'common2'
在不使用插件的前提下打包结果如下：
image.png
case 1 把多入口entry抽离为common.js
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "common.js"
})
]
执行结果如下:
image.png
case 2 从children chunk抽离 common.js
// 单入口文件 main.js
const component1 = function(resolve) {
return require(['./a'], resolve)
}
const component2 = function(resolve) {
return require(['./b'], resolve)
}
console.log(component1, component2, $, 'a')
不使用commonChunk执行结果如下：
image.png
//使用commonChunk 配置如下
plugins: [
new webpack.optimize.CommonsChunkPlugin({
children: true,
async: 'children-async',
name: ['main']
})
]
// 执行结果如下
image.png
case 3 node_modules所有额三方依赖抽离为vendor.js
//webpack 配置
...
entry : {
main: './src/main.js',
vendor: ['jquery']
}
...
...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', // 这里是把入口文件所有公共组件都合并到 vendor模块当中
filename: '[name].js'
})
...
执行结果如果下：
image.png
case 4 case 2和case 3混合使用 vendor.js是三方依赖提取，0.js是children公共部分提取
....
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].js'
}),
new webpack.optimize.CommonsChunkPlugin({
children: true,
async: 'children-async',
name: ['main']
})
]
....
执行结果如下：
image.png
注意的几点
- name：
如果entry和CommonsChunkPlugin的 name 都有vendor 是把抽离的公共部分合并到vendor这个入口文件中。
如果 entry中没有vendor, 是把入口文件抽离出来放到 vendor 中。 -
minChunks：既可以是数字，也可以是函数，还可以是Infinity。
数字：模块被多少个chunk公共引用才被抽取出来成为commons chunk
函数：接受 (module, count) 两个参数，返回一个布尔值，你可以在函数内进行你规定好的逻辑来决定某个模块是否提取 成为commons chunk
image.png
Infinity：只有当入口文件（entry chunks） >= 3 才生效，用来在第三方库中分离自定义的公共模块
- commonChunk 之后的common.js 还可以继续被抽离，只要重新new CommonsChunkPlugin中name:配置就好就可以实现
- 以上方法只使用与 webpack 4 以下版本
