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-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高级配置