公共代码提取 ,webpack4弃用CommonsChunkPlugin,内置 optimization
作用
提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件
配置项
splitChunks
-
chunks 值为async（默认）,all（推荐），initial
// 入口 import "./a.js" //同步加载 import ('./b.js') //异步加载 // b.js import vue from "vue" //-
async：
分割异步打包的代码，打包出b和vue两个chunk
image.png all
分割异步同步代码（需要定义新规则，将同步的代码打包）
splitChunks: { chunks: 'all', cacheGroups: { a : { name: 'a', chunks: 'all', } } }image.png-
initial
同时打包异步同步，但是异步内部的引入将不再考虑，直接打包一起，会将vue和b的内容打在一起
image.png
-
-
cacheGroups 自定义配置决定生成的文件,缓存策略
- test ： 限制范围，正则匹配文件夹或文件
- name : 打包的chunks的名字
- priority : 优先级，多个分组冲突时决定把代码放在哪块
- enforce: 强制生成
- minSize 生成新的chunk的最小体积，默认30000B
-
minChunks 被entry引入的次数，默认1（为1时，适合分离
node_modules里的第三方库） - maxInitialRequest entry文件最大的并行请求数（请求过多，耗时），默认5
- maxAsyncRequests 按需加载的时候最大的并行请求数，默认3
- automaticNameDelimiter 定义文件名称连接符，默认~
需要注意的地方
- cacheGroups会继承和覆盖splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组
- cacheGroups里的每项最好都要加上chunks参数，不然可能打包不出想要的东西
- minSize默认是30KB（这个体积是压缩前的）在小于30kb的情况下一定要设置一个值，否则也有可能打包不出想要的东西，而且该配置项要配置在cacheGroups
- 默认的提取公共模块机制 vendors和default 可能会产生意外的结果，尽量取消默认后的再自定义（在多页面应用中，假设某个页面的css文件重写了样式，就有可能使这个重写流流入公共样式中，在另一个页面被引用而导致布局出错）
default:false , vendors: false
runtimeChunk
runtimeChunk ，作用是将包含chunks映射关系的list单独从app.js里提取出来，因为每一个chunk的id基本都是基于内容hash出来的，所以你每次改动都会影响它，如果不把它提取出来的话，等于app.js每次都会改变，缓存就失效了。
在使用 CommonsChunkPlugin的时候，我们也通常把webpack runtime 的基础函数提取出来，单独作为一个chunk,毕竟code splitting想把不变的代码单独抽离出来，方便浏览器缓存，提升加载速度。
其实就是单独分离出webpack的一些运行文件。
