ant design 配置按需加载

使用

create-react-app

创建一个 react 项目，并安装

antd

。根据文档需要下载下面几个插件

react-app-rewired customize-cra babel-plugin-import

。

1. 安装插件

   yarn add react-app-rewired customize-cra babel-plugin-import
              

2. 更改

   package.json

   文件

   "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-app-rewired eject"
   },
              

   也就是说，把

   "script"

   下的

   react-scripts

   全部改成

   react-app-rewired

3. 在项目根目录创建一个

   config-overrides.js

   用于修改默认配置

   const { override, fixBabelImports } = require('customize-cra');
   
   module.exports = override(
       fixBabelImports('import', {
           libraryName: 'antd',
           libraryDirectory: 'es',
           style: 'css',
       }),
   );
              

   把上面代码拷贝到该文件即可。
4. 重新启动项目

   npm run start

5. 使用

   import { Button } from 'antd'
   
   <div>
   	<Button>Button</Button>
   </div>