引言

create-react-app：是一個建立react專案特別方便的腳手架，他幫我們配置好了各種需要使用的工具，減少了很多工作量。

antd：是螞蟻金服推出的一個很優秀的react UI庫，其中包含了很多我們經常使用的元件，對於小白學習react來說十分友好！

當我們沒有進行任何配置直接在這個專案中使用antd庫時，會在控制檯看到如下提示：

那麼就有可能是使用了 import { Button } from 'antd'; 的寫法引入了 antd 下所有的模組，這會影響應用的網路效能，這時就體現了按需載入的重要性！

那麼，如何實現按需載入呢？

1. 單個元件分別引入對於的元件與樣式

import Button from 'antd/lib/button';  // 需要結構賦值的方式引入
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 載入 css 檔案
 

這個方法的優點是比較簡單，不需再次配置，直接載入即可，但是比較麻煩，每次載入一個新的元件都需要先載入元件，在載入元件的css檔案，程式碼冗餘。

2. 使用 babel-plugin-import 來進行按需載入

yarn add babel-plugin-import --dev     // 安裝

使用這個外掛之後仍然可以用：import { Button } from 'antd';來引入元件，但是這個時候外掛會幫你轉換成 antd/lib/xxx 的寫法。另外此外掛配合 style 屬性可以做到模組樣式的按需自動載入。這個時候問題來了，通過create-react-app來建立的react專案的webpack是封裝後的，在專案中是隱藏的，如何修改其配置呢？

下面介紹兩種比較常用的方法：

• yarn eject
• 使用 react-app-rewired

yarn eject:

1. 在使用create-react-app建立專案之後，在package.json中有一個命令：

 "scripts": {
    "eject": "react-scripts eject"
  }

2. 執行yarn eject命令後會在主目錄下生成一個config資料夾,內容就是相關的配置文件。

在執行完yarn eject之後，會將專案中所有的配置項反編譯出來，就可以認開發者任意修改配置項，但是這個過程是不可逆的，一旦執行，就不能恢復，再也不能通過升級其中的react-scripts包來升級create-react-app的特性。

3. 修改webpack.config.dev（開發環境）和webpack.config.prod（構建環境）下的 Process JS with Babel.下的那個options為：

options: {
             plugins: [
               ['import',[{  // 匯入一個外掛
                 libraryName: 'antd',   // 暴露的庫名
                 style: true // 直接將ants樣式檔案動態編譯成行內樣式插入，就不需要每次都匯入
               }]]
             ],
             cacheDirectory: true,
           },

和

options: {
              plugins: [
                ['import',[{  // 匯入一個外掛
                  libraryName: 'antd',   // 暴露的庫名
                  style: true // 直接將ants樣式檔案動態編譯成行內樣式插入，就不需要每次都匯入
                }]]
              ],
              compact: true,
            },

4. 使用元件：

import { Button } from 'antd';

使用 react-app-rewired

1. 安裝react-app-rewired：

yarn add react-app-rewired --dev

2. 修改package.json:

/* package.json 的配置需要做如下修改*/
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

3. 然後在專案的根目錄下建立一個 config-overrides.js 用於修改預設配置:

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', {libraryName: 'antd', style: 'css'}], config);
  return config;
};

4. 使用元件：

import { Button } from 'antd';

總結

關於antd的按需載入其實還有其他的方法，本文只介紹了兩種比較常用的配置方法，比如替換 react-scripts 包法和scripts 包 + override 組合法，具體可以參考大佬的文章：https://zhaozhiming.github.io...