里面有提到 initial 模式下会分开优化打包异步和非异步模块。而 all 会把异步和非异步同时进行优化打包。也就是说moduleA在indexA中异步引入，indexB中同步引入， initial 下moduleA会出现在两个打包块中，而 all 只会出现一个。
cacheGroups
使用cacheGroups可以自定义配置打包块。
// indexA.js import React from 'react' import ReactDOM from 'react-dom' import _ from 'lodash' import $ from 'jquery' // indexB.js import React from 'react' import ReactDOM from 'react-dom' import('lodash') import $ from 'jquery' // webpack.config.js optimization: { splitChunks: { cacheGroups: { commons: { name: 'commons', chunks: 'initial', minChunks: 2 } } } }
根据开头介绍webapck分割条件，一些公共模块被打包进了commons，自定义打包块的优先级是0，所以现在公共模块会被打包进commons，而不是上述提到的默认打包块vendors（优先级为负）。
但是这边为什么lodash为什么没打包在一起呢？可以回顾下initial和all的区别。接下来实验下all的效果。
// indexA, indexB同上 // webpack.config.js optimization: { splitChunks: { cacheGroups: { commons: { name: 'commons', chunks: 'all', minChunks: 2 } } } }
结果在预期中，lodash被打包在一起了。
提取第三方库
最后看下之前CommonsChunkPlugin常用的分离部分第三方库功能。这边你可以想一下怎么操作。
上面已经提到了设置 chunks: initial || all 都可以提取出第三方库。但是它是把所有第三库提取出来，所以我们在只提取react和react-dom的情况下，需要自定义一个cacheGroup。
// indexA.js import React from 'react' import ReactDOM from 'react-dom' import _ from 'lodash' import $ from 'jquery' // webpack.config.js entry: { indexA: path.join(__dirname, 'src/indexA.js') }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendors: { test: /react/, name: 'vendors' } } } }
我们去重写了vendors打包块，只打包匹配react的模块，所以达到了之前CommonsChunkPlugin的功能。
或者
// index.jsx import React from 'react' import ReactDOM from 'react-dom' // webpack.config.js entry: { indexA: path.join(__dirname, 'src/indexA.js'), vendor: ["react", "react-dom"] }, optimization: { splitChunks: { cacheGroups: { vendor: { name: "vendor", chunks: "initial" } } } }
optimization.runtimeChunk
最后提一下runtimeChunk，通过 optimization.runtimeChunk: true 选项，webpack会添加一个只包含运行时(runtime)额外代码块到每一个入口。（译注：这个需要看场景使用，会导致每个入口都加载多一份运行时代码）
总结
webpack4的splitChunks功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。