總結(jié)一下CommonsChunkPlugin的優(yōu)化過程，一直理解錯(cuò)了，羞愧難當(dāng)

api

{
 name: string, // or
 names: string[],
 // 這是 common chunk 的名稱。已經(jīng)存在的 chunk 可以通過傳入一個(gè)已存在的 chunk 名稱而被選擇。
 // 如果一個(gè)字符串?dāng)?shù)組被傳入，這相當(dāng)于插件針對(duì)每個(gè) chunk 名被多次調(diào)用
 // 如果該選項(xiàng)被忽略，同時(shí) `options.async` 或者 `options.children` 被設(shè)置，所有的 chunk 都會(huì)被使用，
 // 否則 `options.filename` 會(huì)用于作為 chunk 名。
 // When using `options.async` to create common chunks from other async chunks you must specify an entry-point
 // chunk name here instead of omitting the `option.name`.

 filename: string,
 // common chunk 的文件名模板?？梢园c `output.filename` 相同的占位符。
 // 如果被忽略，原本的文件名不會(huì)被修改(通常是 `output.filename` 或者 `output.chunkFilename`)。
 // This option is not permitted if you're using `options.async` as well, see below for more details.

 minChunks: number|Infinity|function(module, count) -> boolean,
 // 在傳入  公共chunk(commons chunk) 之前所需要包含的最少數(shù)量的 chunks 。
 // 數(shù)量必須大于等于2，或者少于等于 chunks的數(shù)量
 // 傳入 `Infinity` 會(huì)馬上生成 公共chunk，但里面沒有模塊。
 // 你可以傳入一個(gè) `function` ，以添加定制的邏輯（默認(rèn)是 chunk 的數(shù)量）

 chunks: string[],
 // 通過 chunk name 去選擇 chunks 的來(lái)源。chunk 必須是  公共chunk 的子模塊。
 // 如果被忽略，所有的，所有的 入口chunk (entry chunk) 都會(huì)被選擇。

 children: boolean,
 // 如果設(shè)置為 `true`，所有公共 chunk 的子模塊都會(huì)被選擇

 deepChildren: boolean,
 // 如果設(shè)置為 `true`，所有公共 chunk 的后代模塊都會(huì)被選擇

 async: boolean|string,
 // 如果設(shè)置為 `true`，一個(gè)異步的  公共chunk 會(huì)作為 `options.name` 的子模塊，和 `options.chunks` 的兄弟模塊被創(chuàng)建。
 // 它會(huì)與 `options.chunks` 并行被加載。
 // Instead of using `option.filename`, it is possible to change the name of the output file by providing
 // the desired string here instead of `true`.

 minSize: number,
 // 在 公共chunk 被創(chuàng)建立之前，所有 公共模塊 (common module) 的最少大小。
}

我們希望怎樣打包

• 第三方包（ node_model）-> vendor.js
• 主要入口 （ index.js ) -> app.js
• 路由惰加載 （ codeSplit ）-> 1.1.js、1.2.js

會(huì)出現(xiàn)什么問題

• 每次改動(dòng)代碼，對(duì)應(yīng)1.1js等會(huì)重新編譯，但是發(fā)現(xiàn)app.js也會(huì)重新編譯
• 1.1.js里面有奇怪的東西（node_model）
• 1.1.js和1.2.js里面有重復(fù)的代碼

怎么解決

• 改動(dòng)代碼 -> 1.1.js的hash值改變 -> webpack的runtime代碼中manifest發(fā)生改變

此時(shí)manifest存在app.js，把它單獨(dú)打包出來(lái)：

   new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
  }),

• 有奇怪的東西 -> 采用提取render的辦法提取出來(lái)

new webpack.optimize.CommonsChunkPlugin({
 async: 'async-render',
 child: true,
 minChunks: ({ resource } = {}) => (
   resource &&
   resource.includes('node_modules')
 ),
}),

• child: true的意思的把所有的子chunk選中
• async在這里的作用是將打包出來(lái)的node_model作為一個(gè)獨(dú)立的異步子chunk，否則就會(huì)打包進(jìn)app.js里面去了

• 有重復(fù)代碼：

new webpack.optimize.CommonsChunkPlugin({
 async:'async-common',
 child: true,
 minChunks: (module, count) => (
   count >= 2
 ),
}),

這樣的結(jié)果就是子chunks之間的公共代碼也會(huì)被作為一個(gè)獨(dú)立的異步子chunk被打出來(lái)了

待續(xù)