vue-cli 中 CommonsChunkPlugin中如此配置是什么用意？

Question

vue-cli 中 webpack.prod.conf.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

我清楚这是在使用代码拆分功能时，将一个 chunk 的多个子 chunk 的公共的依赖抽离成异步加载的公共代码块，但我不确定name: 'app' 和 async: 'vendor-async'配置具体是什么作用？与我不设置name选项，设置async: true有什么区别？

Answer 1

看文档 https://doc.webpack-china.org...
将名为'app'的chunk的子模块中，如果有3个或3个以上的模块都用了某一个模块X，那么将X作为common-chunk提出来，找出n个X合成一个包。在这里，这个包是异步的，叫'vendor-async'

1.减少因业务代码变动导致的频繁更新cdn
2.在代码分离的时候，先下载这个公共包，后续其它包的下载就比较小了
举个例子：有四个代码分离的页面分别依赖是，{a,b,c,d} {a,c,e} {a,b,f} {b,c,g}
提取common-chunk =>{a,b,c}
各个页面的依赖就变成 {d},{e},{f},{g}

Answer 2

将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存，因为在项目维护过程中，第三方依赖不经常变化，而业务代码会经常变化。详细介绍https://doc.webpack-china.org...

刚刚仔细看了文档，对上面的说法进行一下补充：

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

上面这个代码肯定是分离的我们的业务代码，
也就是vue-cli打包出来的app.js是我们的业务代码，
然后这里面可能会有异步模块
异步模块肯定就不会放在我们首屏加载的app.js里面
比如，a和b都是异步模块，但是这两个异步模块中有一个公共模块c
如果打包的时候把c分别都打包进a和b
那么就造成重复打包了。。。

所以

  async: 'vendor-async',
  children: true,

这两个行就起作用了。

当你设置children为true，共同引用的模块就会被打包合并到名为vendor-async的公共模块，当你懒加载a或者b的时候并行加载这个vendor-async公共模块。

个人的理解，有问题请指正~