ant design 配置按需加载

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>