antd在React项目中按需加载

在 antd 官网中只介绍了使用 react-app-rewired 来配置 antd 的按需加载，但我们日常开发通常会使用 eject 命令暴露所有配置，所以官网提供的配置方法已不再适用，本文将会介绍在 eject 项目之后配置 antd 按需加载的方法

引入 antd

适用 yarn 或 npm 安装并引入 antd

$ yarn add antd
复制代码

引入babel-plugin-import

使用 babel-plugin-import 按需引入 antd 样式

$ yarn add babel-plugin-import
复制代码

修改package.json

修改 package.json 文件中的 babel 配置信息，增加 babel-plugin-import 的配置

{
  ······
  "babel": {
    "plugins": [
      ······
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ],
    ],
    "presets": [
      "react-app"
    ]
  }
}
复制代码

重启项目

重启项目，按需加载配置完毕，可以使用以下方式引入 antd 组件

// 未配置按需加载前，需使用此方法引入组件
- import Button from 'antd/lib/button';

// 配置完成后使用此方法按需加载组件
+ import { Button } from 'antd';
复制代码