摘要：表示生成一個懶加載的，只有當需要時才會被加載。主要是作用域提升，將所有模塊放在同一個作用域當中，一方面能提高運行速度，另一方面也能降低文件體積。前提是你的代碼是用模塊寫的。參考文章學習小結(jié)

之前接手公司一個前端項目，開發(fā)了幾個月后越來越難以忍受項目結(jié)構(gòu)的混亂和打包體積的臃腫（腳手架和基本功能代碼都是從公司的其他項目復制過來的），如果不立即進行重構(gòu)，難以想象以后要怎么維護各個產(chǎn)品線。于是我自告奮勇承擔了項目框架的優(yōu)化任務，這里分享一下我在打包體積優(yōu)化中所研究的成果，經(jīng)過幾輪的努力，成功的將我們這個 react+antd+immutable+rxjs的較大項目從打包后的9MB降低到了2.5MB，首屏加載（gzip）從600KB+降低到了200KB，并且基本上將穩(wěn)定的第三方庫，webpack runtime代碼和業(yè)務代碼完全分離，最低限度減少網(wǎng)站更新時用戶需要加載的代碼量。
廢話不多說，下面詳細說明我所做的每一個步驟。

項目里對庫的使用較為混亂，有些庫安裝了但很少用或者根本沒用，但是又在webpack中的vendor入口指定打包了進來，造成體積上的浪費，所以需要仔細評估每個庫是否必要安裝。
react v16對比react v15，加上react-dom，體積上降低了30%，因此果斷升級。

分析完stats.json后，發(fā)現(xiàn)的第一個問題就是moment很大，具體原因webpack是把所有的locale文件打包了進來。我們的項目不需要多語言，因此我們可以使用ContextReplacementPlugin插件來舍棄中文之外的其他語言文件：

new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn/)

去除掉locale后，又發(fā)現(xiàn)了另一個問題：依賴分析顯示，我的項目里打包了兩份moment，一份es module版的，一份umd版的。經(jīng)過一番排查后發(fā)現(xiàn)，使用import "moment"導入的會加載es module版的，這是webpack配置的mainFields決定的，但是在locale中的語言文件中，它會用相對路徑導入umd版的moment，這就導致我的項目里出現(xiàn)了兩份moment。為了統(tǒng)一版本，我們將moment設置為一個別名并指向umd版：

alias: {
  "moment$": path.resolve("node_modules/moment/moment"),
},
// $表示絕對匹配

另外還有一個庫dayjs值得一提，其API基本與moment一致，但是體積僅為幾KB，不知道antd會不會加入對dayjs的支持。

項目之前是直接使用的完整版的echarts，并且沒有將echarts組件抽取為公共chunk，結(jié)果導致每個異步加載的頁面組件，只要用了echarts就會變得碩大無比。
解決方案：在echarts官網(wǎng)定制一份僅包含項目所需圖表類型的閹割版，并且將echarts組件抽取為異步加載的chunk，這樣就只需要加載一次。
關于如何將組件抽取為多帶帶的chunk，可以用import()語法，或者使用react-loadable這個庫，它可以直接將react組件包裝成異步組件，并在需要時才進行加載。

上面的步驟抽取echarts就是指的抽取異步chunk中的公共代碼，除了echarts之外還有很多大體積的公共代碼，例如各種antd的組件以及其依賴的底層組件rc-components，這部分也是我們要提取出來的。我們沒必要將每個antd組件包裝為異步組件，這里只需要配置一下CommonsChunkPlugin就可以了：

new webpack.optimize.CommonsChunkPlugin({
  async: "async-vendor",
  deepChildren: true,
  minChunks: (module) => {
    return /node_modules/.test(module.context);
  },
}),

在沒有將children設為true時，CommonsChunkPlugin會從入口文件(entry)提取公共代碼，這時就不會對異步加載的chunk起作用。因此為了提取異步chunk的公共代碼，我們設置deepChildren為true（children指的是入口文件的直接子節(jié)點，deepChildren指的是全部子節(jié)點）。async表示生成一個懶加載的chunk，只有當需要時才會被加載。
上面只是將第三方庫的公共代碼提取了出來，如果希望把異步chunk當中自己的業(yè)務代碼提取出來，則可以修改minChunks規(guī)則，或者再增加一個配置：

    new webpack.optimize.CommonsChunkPlugin({
      async: "async-biz",
      deepChildren: true,
      minChunks: 2,
    }),

項目之前的做法是，每個路由對應的頁面根組件都需要異步加載，這樣做的結(jié)果是打包出了很多個chunk，而有一半的chunk在gzip之前體積都不足5KB，浪費請求是一方面，更嚴重的是影響了首屏加載體積。
這是為什么？明明把每個頁面都異步加載了，怎么會影響首屏體積呢？其實原因就是第三步中的async-vendor被首屏加載了，該chunk主要包含了antd組件，gzip之后約為120KB。
對于用戶來說，第一次打開我們的網(wǎng)站一定是到登錄界面，此時需要完全加載我們的首屏代碼，之后有了緩存，除了業(yè)務代碼更新需要加載很小的chunk之外，理論上是不需要再下載任何代碼的，因此我們需要針對登錄界面進行首屏優(yōu)化。
登錄界面包含了登錄、修改密碼、申請賬號等子路由，之前將這些都打包為異步chunk，由于這些界面需要async-vendor當中的某幾個antd組件，因此首屏加載一定會包含async-vendor。拆分async-vendor是一種辦法，但是還要分析到底用了哪些組件，改動業(yè)務代碼后又要重新分析，顯得很麻煩，最簡單的做法就是取消登錄相關路由的異步加載，將其打包到main當中，同時只需加載需要的antd組件，因此完全避免了加載async-vendor，首屏體積得到了大大降低。

webpack在客戶端運行時會首先加載webpack相關的代碼，例如require函數(shù)等，這部分代碼會隨著每次修改業(yè)務代碼后發(fā)生變化，原因是這里面會包含chunk id等容易變化的信息。如果不抽取出來將會被打包在vendor當中，導致vendor每次都要被用戶重新加載，vendor也失去了它的意義。分離的配置很簡單：

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

minChunks: Infinity表示創(chuàng)建一個什么都沒有的chunk，因為不會有任何模塊被無限次引用過，這樣webpack runtime代碼就會被CommonsChunkPlugin放入這個最后的chunk當中。

這部分內(nèi)容很簡單，就兩個插件的使用，HashedModuleIdsPlugin和ModuleConcatenationPlugin。
默認情況下，webpack會為每個模塊用數(shù)字做為ID，這樣會導致同一個模塊在添加刪除其他模塊后，ID會發(fā)生變化，不利于緩存。為了解決這個問題，有兩種選擇：NamedModulesPlugin和HashedModuleIdsPlugin，前者會用模塊的文件路徑作為模塊名，后者會對路徑進行md5處理，降低了文件體積，相比較而言，應該開發(fā)時選擇前者，生產(chǎn)環(huán)境選擇后者。
ModuleConcatenationPlugin主要是作用域提升，將所有模塊放在同一個作用域當中，一方面能提高運行速度，另一方面也能降低文件體積。前提是你的代碼是用es模塊寫的。

polyfill也是體積很大的一部分，但是又不得不加載，關于這部分的優(yōu)化可以參考這篇文章，ES6和Babel你不知道的事兒。還有一種方法是使用polyfill.io，這個解決思路個人覺得很不錯，但是還不敢在生產(chǎn)環(huán)境用，先觀望觀望。

以上內(nèi)容是我這些天找資料研究的結(jié)果，總的來說打包體積算是得到了有效控制，關于chunk的打包配置如下：

entry: {
    main: path.join(process.cwd(), "src/index.js"),
    vendor: [
      "babel-polyfill", "immutable", "moment", "react", "react-dom" ...
    ],
},
output: {
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].chunk.js",
},
plugins: [
    new webpack.HashedModuleIdsPlugin(),
    
    new webpack.optimize.ModuleConcatenationPlugin(),
    
    new webpack.optimize.CommonsChunkPlugin({
      async: "async-vendor",
      deepChildren: true,
      minChunks: (module) => {
        return /node_modules/.test(module.context);
      },
    }),
    
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
    }),
    
    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity,
    }),
]

webpack 4已經(jīng)出了，再也沒有CommonsChunkPlugin了，取而代之的是SplitChunksPlugin，看來又要研究新的東西了。。。

參考文章：
CommonsChunkPlugin學習小結(jié)