引言
create-react-app：是一个创建react项目特别方便的脚手架，他帮我们配置好了各种需要使用的工具，减少了很多工作量。antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了很多我们经常使用的组件，对于小白学习react来说十分友好！
当我们没有进行任何配置直接在这个项目中使用antd库时，会在控制台看到如下提示：
那么就有可能是使用了 import { Button } from 'antd'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能，这时就体现了按需加载的重要性！
那么，如何实现按需加载呢？
1. 单个组件分别引入对应的组件与样式
import Button from 'antd/lib/button'; // 需要结构赋值的方式引入import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
这个方法的优点是比较简单，不需再次配置，直接加载即可，但是比较麻烦，每次载入一个新的组件都需要先载入组件，在加载组件的css文件，代码冗余。
2. 使用 babel-plugin-import 来进行按需加载
yarn add babel-plugin-import --dev // 安装
关于插件的介绍和使用，可参考：
使用这个插件之后仍然可以用：import { Button } from 'antd';来引入组件，但是这个时候插件会帮你转换成 antd/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。这个时候问题来了，通过create-react-app来创建的react项目的webpack是封装后的，在项目中是隐藏的，如何修改其配置呢？
下面介绍两种比较常用的方法：
- yarn eject
- 使用 react-app-rewired
yarn eject:
1. 在使用create-react-app创建项目之后，在package.json中有一个命令：
"scripts": { "eject": "react-scripts eject" } 2. 执行yarn eject命令后会在主目录下生成一个config文件夹,内容就是相关的配置文档。
在执行完yarn eject之后，会将项目中所有的配置项反编译出来，就可以认开发者任意修改配置项，但是这个过程是不可逆的，一旦执行，就不能恢复，再也不能通过升级其中的react-scripts包来升级create-react-app的特性。
3. 修改webpack.config.dev（开发环境）和webpack.config.prod（构建环境）下的 Process JS with Babel.下的那个options为：
options: { plugins: [ ['import',[{ // 导入一个插件 libraryName: 'antd', // 暴露的库名 style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入 }]] ], cacheDirectory: true, }, 和
options: { plugins: [ ['import',[{ // 导入一个插件 libraryName: 'antd', // 暴露的库名 style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入 }]] ], compact: true, }, 4. 使用组件：
import { Button } from 'antd'; 使用 react-app-rewired
1. 安装react-app-rewired：
yarn add react-app-rewired --dev
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 --env=jsdom",+ "test": "react-app-rewired test --env=jsdom",} 3. 然后在项目的根目录下创建一个 config-overrides.js 用于修改默认配置:
const {injectBabelPlugin} = require('react-app-rewired');module.exports = function override(config, env) { config = injectBabelPlugin(['import', {libraryName: 'antd', style: 'css'}], config); return config;}; 4. 使用组件：
import { Button } from 'antd'; 总结
关于antd的按需加载其实还有其他的方法，本文只介绍了两种比较常用的配置方法，比如替换 react-scripts 包法和scripts 包 + override 组合法，具体可以参考大佬的文章：