鍍金池/ 問答/HTML/ vue-cli 中 CommonsChunkPlugin中如此配置是什么用意？

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

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'配置具體是什么作用？與我不設(shè)置name選項，設(shè)置async: true有什么區(qū)別？

回答
編輯回答
吃藕丑

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

剛剛仔細看了文檔，對上面的說法進行一下補充：

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

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

所以

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

這兩個行就起作用了。

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

個人的理解，有問題請指正~

2017年3月5日 07:46
編輯回答
不將就

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

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

2017年8月6日 01:34