將第三方依賴單獨(dú)打包。即將 node_modules 文件夾中的代碼打包為 vendor.js 將我們自己寫的業(yè)務(wù)代碼打包為 app.js。這樣有助于緩存，因?yàn)樵陧?xiàng)目維護(hù)過程中，第三方依賴不經(jīng)常變化，而業(yè)務(wù)代碼會(huì)經(jīng)常變化。詳細(xì)介紹https://doc.webpack-china.org...

剛剛仔細(xì)看了文檔，對(duì)上面的說(shuō)法進(jìn)行一下補(bǔ)充：

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

上面這個(gè)代碼肯定是分離的我們的業(yè)務(wù)代碼，
也就是vue-cli打包出來(lái)的app.js是我們的業(yè)務(wù)代碼，
然后這里面可能會(huì)有異步模塊
異步模塊肯定就不會(huì)放在我們首屏加載的app.js里面
比如，a和b都是異步模塊，但是這兩個(gè)異步模塊中有一個(gè)公共模塊c
如果打包的時(shí)候把c分別都打包進(jìn)a和b
那么就造成重復(fù)打包了。。。

所以

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

這兩個(gè)行就起作用了。

當(dāng)你設(shè)置children為true，共同引用的模塊就會(huì)被打包合并到名為vendor-async的公共模塊，當(dāng)你懶加載a或者b的時(shí)候并行加載這個(gè)vendor-async公共模塊。

個(gè)人的理解，有問題請(qǐng)指正~

看文檔 https://doc.webpack-china.org...
將名為'app'的chunk的子模塊中，如果有3個(gè)或3個(gè)以上的模塊都用了某一個(gè)模塊X，那么將X作為common-chunk提出來(lái)，找出n個(gè)X合成一個(gè)包。在這里，這個(gè)包是異步的，叫'vendor-async'

1.減少因業(yè)務(wù)代碼變動(dòng)導(dǎo)致的頻繁更新cdn
2.在代碼分離的時(shí)候，先下載這個(gè)公共包，后續(xù)其它包的下載就比較小了
舉個(gè)例子：有四個(gè)代碼分離的頁(yè)面分別依賴是，{a,b,c,d} {a,c,e} {a,b,f} {b,c,g}
提取common-chunk =>{a,b,c}
各個(gè)頁(yè)面的依賴就變成 cqdtdgtli,{e},{f},{g}