antd按需加载

使用react-app-rewired
安装依赖
npm i react-app-rewired@2.0.2-next.0 babel-plugin-import customize-cra

这个时候就会有一个比较大的坑,react-app-rewired必须制定版本,否则报错

修改启动方式,在package.json中
原版
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},

修改后的版本

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

在项目的根目录下创建config-overrides.js

const {
override,
fixBabelImports,
addLessLoader,
} = require(“customize-cra”);

module.exports = override(
fixBabelImports(“import”, {
libraryName: “antd”, libraryDirectory: “es”, style: true // change importing css to less
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { “@primary-color”: “#1DA57A” }
})
);

重新启动项目,就可以按需加载了
import { Button } from ‘antd’;

总结
使用react-app-rewired来代替react-scripts的启动方式,并且安装所需要的依赖,在根目录创建config-overrides.js文件,导入配置即可完成