在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';
复制代码