Ant Design 3.8.4 之後版本 @ant-design/icons 的 Bundle 大小暴增的解決方法

筆者當下寫的時候 Ant Design 版本已是 3.20.0 ，但這個 icon 包檔案過大的 issue 已經在官方 Github 上存在有 9 個月還尚未 close 。雖然官方決定要到 4.0 版大修有關 icon 的使用方式，將修改成有關 icon 的 props 不能直接輸入字串來使用，而是要引入要使用的 icon 元件來輸入。不過我看要等到 Ant Design 4.0 正式 Release 可能要等到年底或明年。

實作

這裡主要是藉由提出暫時解決方案的建議，然後以 create-react-app 為例來實作。範例專案放在我的 Github 上，使用 create-react-app 建立一個專案然後修改 webpack 的設定檔來達成目的，可以參考看看。

以下直接說明比較關鍵的步驟。

步驟 1

由於要自己決定要匯入哪些 icons 因此必須要安裝 @ant-design/icons 這個 package

npm i @ant-design/icons
or
yarn add @ant-design/icons

步驟 2

建立一個告訴 webpack 要匯入哪些 icons 的 js 檔，這裡我命名為 antd-icons.js

步驟 3

到你的 webpack.config.js 中新增

resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, 'path/to/antd-icons.js');
  }
}

這邊是告訴 webpack 跟他說：「如果你有要到 @ant-design/icons/lib/dist$ 這裡載入模組時，不要到裡面抓，改到我所指定的 js 裡抓」來避開 webpack 把原本 antd 中預設匯入整坨所有 icons 全部引入。

調整前結果

調整前 create-react-app 產出的總體大小 = 674.5 KB

調整後結果

調整後 create-react-app 產出的總體大小 = 213.1 KB

使用到的 antd icons 打包後 = 3.12 KB

結論

這樣調整後，可以大量減少打包後的大小，但是比較麻煩的就是開發時，必須要知道自己使用了哪些 icons ，然後要記得到 antd-icons.js 加入，否則就會看不到顯示，而且要知道自己是 type 打錯還是忘了加入。

雖然 Ant Design 把一些元件上添加 icon 的方式寫成只要傳入 icon type 的字串就能直接使用，但這也就代表元件內必須引入所有的 icon 才能抓取到開發者使用的 icon 資料，這雖然方便到了開發者寫程式的方便性，但是卻導致最後產出的 bundle 卻攜帶了開發者一堆根本沒用過的 icon 資料，對最終使用者而言就需要額外的下載那多餘的流量，傷了流量也傷了使用者的心。