從官方給出的示例中我們可以得知，antd中js的加載是自動按需加載的。而對于css的加載則只字未提

js按需加載，如圖所示：

image.png

此時你大概會懷念vue中對于webpack的配置，然后我從網上找了大量的教程，基本都是告訴你要將配置項暴露出來進行修改

$ npm run eject

運氣不好的話會有很多報錯，像這樣

image.png

還有這樣

image.png

看著成篇的webpack配置有沒有很頭疼，完全不知道應該修改哪行，有木有？腳手架的功能就是想讓我們即使不知道如何配置webpack，也能讓webpack用起來爽歪歪，如此方法，則不得不使我們回頭去學webpack的配置，然而我在接下來的文檔中找到了答案，如圖所示：

image.png

好了，正文開始，對于使用react-app創(chuàng)建項目和引入antd的過程，此處不做贅述

1、安裝craco

$ yarn add @craco/craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

2、安裝

$ yarn add babel-plugin-import -D

3、新建配置文件craco.config.js

4、文件配置內容如下

module.exports = {
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
    ]
  },
};

5、如果要結合less配置，可參照antd官網,下面給出完整配置

$ yarn add craco-less

const CracoLessPlugin = require('craco-less');
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
    ]
  },
};

大功告成，在此感謝@古天凰、antd官網

對于以下報錯，可將React-app嚴格模式注銷，即可解決。

image.png

修改index.js，如下所示

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  // </React.StrictMode>,
  document.getElementById('root')
);