解決Antd打包體積過大

官方文檔推薦：使用 babel-plugin-import（推薦）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 文件
    }]
  ]
}
複製代碼

而後只需從 antd 引入模塊便可，無需單獨引入樣式。 實現按需加載,僅僅會加載用到的組件的js 和css，按需加載方式居於.babel配置

// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from 'antd';
複製代碼

其實就至關於簡化了，不用這樣寫了

import Button from 'antd/lib/button';
複製代碼

2.externals

externals是決定的是以哪一種模式去加載所引入的額外的包

externals以後 antd 利用 cdn 整個引入（即script標籤引入），不須要用 babel-plugin-import 若是用了 babel-plugin-import，那 externals 設置就會不一樣，得按 antd 單獨組件來設置，如：

externals{
 'antd/lib/table': 'antd.Table'
}
複製代碼

分離後在externals中所指定的包就不會被打包

使用第三方 cdn 進行 external 並不能減小總體的尺寸，甚至JS載入的尺寸更大，只是能夠減小本身服務器的流量 若是在乎的是總體大小，應該是用 CommonsChunk 或 DllPlugin

補充： 什麼是CDN？

cdn(內容分發網絡)的做用是加速網絡傳輸，經過將資源部署到服務器，來加快資源到獲取速度。目前用到的CDN主要是由Bootstrap 中文網支持並維護的前端開源項目免費 CDN 服務。

3.利用webpack.optimize.CommonsChunkPlugin壓縮JS文件

可是這個並非針對antd來優化的，而是整個是項目的大小

CommonsChunkPlugin

主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而致使加載時間過長，着實是優化的一把利器。

首屏用不到的組件改爲異步加載，而且在webpack設置chunk