antd-design4.0配置按需加载
-
create-react-app
-
安装antd-design
-
-
antd
的 JS 代码默认支持基于 ES modules 的 tree shaking。 -
antd的css按需加载优化:
-
安装react-app-rewired、customize-cra、babel-plugin-import
-
npm run eject
-
根目录增加config-overrides.js,并增加以下代码:
-
//根目录创建config-overrides.js, 修改默认配置 const { override, fixBabelImports } = require("customize-cra"); module.exports = override( fixBabelImports("import", {//antd按需加载 libraryName: "antd", libraryDirectory: "es", style: "css" }) );
-
- 修改package.json:
-
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },
现在项目里可以使用
import {Button} from 'antd'
来按需引入antd
-