react按需加载antd

• antd（UI库）

npm install antd --save

通过 npm fund 可查看下载详情

• 按需加载（类似vue.config.js）

npm i react-app-rewired customize-cra babel-plugin-import -D

• 装饰器配置

npm i -D @babel/plugin-proposal-decorators

安装完成，做如下修改：

• package.json中的scripts

react-scripts ----> react-app-rewired

• 根目录（src同层级）新增config-overrides.js文件，增加配置：

const {
    override,
    fixBabelImports,
    // 配置装饰器
    addDecoratorsLegacy

} = require("customize-cra")
// 配置antd
module.exports = override(
    fixBabelImports("import",{
        libraryName: "antd",
        libraryDiractory: "es",
        style: "css"
    }),
    addDecoratorsLegacy()
)

• antd使用举例

导入：

import {Input,Button ,Form} from 'antd'
// icons模块
import {
    // HomeOutlined,
    // SettingFilled,
    // SmileOutlined,
    // SyncOutlined,
    // LoadingOutlined,
    LockFilled,
    UserOutlined
  } from '@ant-design/icons';

使用：

<Form>
    <FormItem>
        <Input prefix={<UserOutlined />} onChange={this.changeValueEvent.bind(this,"user")}/>
    </FormItem>
    <FormItem>
        <Input prefix={<LockFilled />} onChange={this.changeValueEvent.bind(this,"pwd")}/>
     </FormItem>
</Form>
<Button type="default" onClick={this.submitEvent}>提交</Button>