使用webpack打包项目时一方面我们要防止单个文件太大，另一方面要防止文件碎片化，即打包文件太多，导致网络请求过多。所以合理的配置应该是兼顾打包文件的数量以及打包文件的个数。
代码分离 打包优化
在 webpack4版本之前，我们可以使用 CommonsChunkPlugin进行配置，在webpack4版本之后我们可以通过配置splitChunks来实现。splitChunks的配置选项如下：
- chunks: 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块);
- minSize: 表示在压缩前的最小模块大小；
- minChunks: 表示被引用次数；
- maxAsyncRequests: 最大的按需(异步)加载个数；
- maxInitialRequests: 最大的初始化加载个数；
- name: 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
- cacheGroups: 缓存组。
对于缓存组是一个对象，除了可以有上面的chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、name外，还有其他的一些参数：
如果不在缓存组中重新赋值，缓存组默认继承上面的选项，但是还有一些参数是必须在缓存组进行配置的。
- priority: 表示缓存的优先级；
- test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
- reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。
这里对cacheGroups有些不了解，其实其是对代码拆分进行细化配置的，比如说我想将某个特定的库单独打包，我就需要配置cacheGroups，通过test过滤出要单独打包的模块。
将第三方库的代码单独打包
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
}
}
}
}
以上代码既可以将第三方代码单独打包。
需求：如果我的代码中使用了jquery vue lodash等第三方库，我想将这三个库分别打包进不同的文件(实际项目中不推荐，此处只用于测试)，该如何设置呢？
optimization:{
splitChunks: {
cacheGroups: {
module1:{ // 键值可以自定义
chunks:'initial', //
test: /[\\/]node_modules[\\/]jquery/,
name:'jquery',
},
module2:{
chunks:'initial',
test:/[\\/]node_modules[\\/]vue/,
name:'_vue',
},
module3:{
chunks:'initial',
test:/[\\/]node_modules[\\/]lodash/,
name:'loadash',
}
}
}
如上配置打包后的输出如下所示：
可以看出vue文件并没有如我们所愿打包出来，而是跟业务代码一起打包进了index.bundle.js文件，这是为什么呢？我们知道最大的初始化文件加载个数maxInitialRequests的默认值为3，也就是这个的默认值限制了vue文件的单独打包。我们做如下修改：
optimization:{
splitChunks: {
maxInitialRequests: 4,
cacheGroups: {
module1:{ // 键值可以自定义
chunks:'initial', //
test: /[\\/]node_modules[\\/]jquery/,
name:'jquery',
},
module2:{
chunks:'initial',
test:/[\\/]node_modules[\\/]vue/,
name:'_vue',
},
module3:{
chunks:'initial',
test:/[\\/]node_modules[\\/]lodash/,
name:'loadash',
}
}
}
如上配置打包后的输出如下所示：
manifest
若要将manifest单独打包，需要配置runtimeChunk选项。
runtimeChunk: {
name: 'page/manifest'
}
总结
webpack配置千千万，挨个试试又怎样。
