注意这里我们priority的设置，vendors>async-commons>commons，我们首先将react,react-dom等优先打包出来，然后再打包公共部分，如果将vendors的优先级设置小于两个Common的优先级，那么react，react-dom将会打包到common包，将不会再生成vendors包。
如果我们这里将commons的配置去掉，将会生成一个topic~home的包，我们配置了async-common提取出异步加载的公共包后，将会默认将同步加载的公共包打包生成以automaticNameDelimiter连接符‘~'生成的名字'topic~home'包，内容其实和commons包内容完全一样，
ok！按照我们的要求，这样首次页面加载只会引入vendors,commons包，而不会引入async-common包，还是挺棒的！追求更精致的我们，再认真想想，是不是还可以做一些更好的优化？
到目前为止我们打包文件的打包是这样的：
用gzip压缩后，最大的async-common包有391kb。公司说最近因为一些状况，布置到生产后速度慢的时候，有时候只能有20kb/s的下载速度==。。。。于是继续split!
分析一下：
async-common中包含了自己写的src组件和第三方组件
async-common中比较大是echarts，zrender(echarts引入)和d3，结合项目来说，只有部分页面我们需要echarts（d3同），所以我们可以考虑将d3和echarts这两个比较大的包提取出来，等到某个页面需要的时候，再让其异步加载，这样就大大减小了async-common的体积了。
修改
cacheGroups: { vendors: { // 基本框架 chunks: 'all', test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/, priority: 100, name: 'vendors', }, d3Venodr: { // 将体积较大的d3单独提取包，指定页面需要的时候再异步加载 test: /d3/, priority: 100, // 设置高于async-commons，避免打包到async-common中 name: 'd3Venodr', chunks: 'async' }, echartsVenodr: { // 异步加载echarts包 test: /(echarts|zrender)/, priority: 100, // 高于async-commons优先级 name: 'echartsVenodr', chunks: 'async' }, 'async-commons': { // 其余异步加载包 chunks: 'async', minChunks: 2, name: 'async-commons', priority: 90, }, commons: { // 其余同步加载包 chunks: 'all', minChunks: 2, name: 'commons', priority: 80, }, }
当然，每次修改后，需要在htmlWebpackPlugin中配置chunk需要的包
plugins: [ new HtmlWebpackPlugin({ // home页面 filename: 'home.html', template: './template.html', chunks: ['vendors', 'commons', 'home'], }), new HtmlWebpackPlugin({ // topic页面 filename: 'topic.html', template: './template.html', chunks: ['vendors', 'commons', 'topic'], }), ],
后期还做了其他的拆分和优化，大概最大的包保持在100k左右，当然也不建议拆的特别小，因为浏览器http1可能一次性支持6次下载文件，太多可能会适得其反。大家可以根据自己的项目做不同的拆分方法，总而言之，就是为了让项目更完美的在线上运行，给用户更好的体验~