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