Webpack 提取公共模塊

較早以前總結過一篇【前端構建】WebPack實例與前端性能優化。

此次打算寫幾篇對幾個重要的知識點進行更詳細的總結。本篇是此次 Webpack 相關的第三篇總結，以前的兩篇是：
[譯]爲何要 Webpack
Webpack 構建後文件變得很大？

啃先生(MrKenniu) | 文

上一篇文章提到我主要從四個方面解決 Webpack 構建後文件太大的問題，總結了 Code Split，即按需加載的技能點。這篇總結提取公共代碼。它要解決的問題是冗餘代碼過多，即同一個模塊在多個地方被引用，顯然是解決上一篇文章最後遺留的問題。

Webpack 的 CommonsChunkPlugin 插件，負責將屢次被使用的 JS 模塊打包在一塊兒。

使用&配置項

使用方法：在 webpack config 的 plugins 屬性裏添加 CommonsChunkPlugin 實例便可。

實例化的配置項「options」以下：

name 或者 names：chunk的名稱，若是是 names 數組，則至關於爲數組裏的每一個name 實例化插件。若是缺省，並且 children 或者 asyn 爲 true，那麼，全部的 chunks 都會被使用。

filename：此 common chunk 的文件名模板，能夠與 output.filename 同樣

minChunks：一般狀況下這是一個整數，表示至少有 minChunks 個 chunk 使用了該模塊，該模塊纔會被挪到公共代碼「common chunk」裏。minChunks 還能夠是 Infinity，意味着將沒有任何模塊被移入進來，只是建立當前這個 chunk，這一般用來生成 jquery 等第三方代碼庫。minChunks還能夠是一個返回布爾值的函數，返回 true 該模塊會被移入 common chunk，不然不會。默認值是 chunks 的長度。

chunks：這是一個元素爲 chunk 名稱的數組，插件將會從這些 chunks 裏提取 common chunks。可見，minChunks 若是是整數，那麼它應該小於 chunks 的長度，且大於1。若是缺省，全部的入口 chunks 會被選中。

children：默認false。若是爲 true ，至關於上一項 chunks 配置爲當前 chunk 的子 chunk，用於 code split。

async：默認false。若是爲 true，生成的 common chunk 將會是異步加載的。這個異步的 common chunk 是 name 這個 chunk 的子 chunk，並且跟 chunks 一塊兒並行加載

minSize：若是有指定大小，那麼 common chunk 的文件大小至少有 minSize 纔會被建立。非必填項。

提示：以上配置項理解起來有些複雜，應結合實際案例運行的結果來理解

CommonsChunkPlugin 能解決的問題

在使用插件前，考慮幾個問題：

• 對哪些 chunk 進行提取，這決定了 chunks ，children 和 name 要怎麼配置

• common chunk 是否異步，這決定了 async 怎麼配置

• common chunk 的粒度，這決定了 minChunks 和 minSize 怎麼配置

如下是官方給出的經常使用的場景：

• 提取兩個及兩個以上 Chunk 的公共代碼

• 將 Code Split 切割出來的 Chunk「就是子 Chunk」，提取到父 Chunk

• 將 Code Split 切割出來的 Chunk，提取到一個新的異步加載的 Chunk

• 提取某個相似 jquery 或 react 的代碼庫「可是這個用得不多，使用用 dll 插件來打包會更好一些，一下篇介紹」

例1：chunks 的公共代碼，生成 page-comm

例2：將 code split 的公共子 chunk 提取到父 chunk

topic.js 使用了 code split

例3：將 Code Split 切割出來的 Chunk，提取到一個新的異步加載的 Chunk
async 設置爲true，與例2同樣，不一樣的是例2提取到父 chunk，這樣會增長父 chunk 的文件大小，而例3提到一個新的 chunk 裏，這個 chunk 是異步加載的。

多跑實例，理解各配置項產生的影響