antd在React项目中按需加载

2019-05-13 6,044 阅读1分钟

在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';