从官方给出的示例中我们可以得知，antd中js的加载是自动按需加载的。而对于css的加载则只字未提

js按需加载，如图所示：

image.png

此时你大概会怀念vue中对于webpack的配置，然后我从网上找了大量的教程，基本都是告诉你要将配置项暴露出来进行修改

$ npm run eject

运气不好的话会有很多报错，像这样

image.png

还有这样

image.png

看着成篇的webpack配置有没有很头疼，完全不知道应该修改哪行，有木有？脚手架的功能就是想让我们即使不知道如何配置webpack，也能让webpack用起来爽歪歪，如此方法，则不得不使我们回头去学webpack的配置，然而我在接下来的文档中找到了答案，如图所示：

image.png
查看原文档

好了，正文开始，对于使用react-app创建项目和引入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')
);