react 使用antd 按需加载
使用 react-app-rewired
1. 安装react-app-rewired:
由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra。
yarn add react-app-rewired customize-cra // npm install react-app-rewired customize-cra
2. 修改package.json:
/* package.json 的配置需要做如下修改*/ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", }
#
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js
文件。
yarn add babel-plugin-import // npm install babel-plugin-import
3. 然后在项目的根目录下创建一个 config-overrides.js 用于修改默认配置:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );
4. 使用组件:
import { Button } from 'antd';
最后重启 yarn start
访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。
官网地址:antd高级配置