实现antd的按需加载

引言

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     // 安装

关于插件的介绍和使用，可参考：https://blog.youkuaiyun.com/qq_3580...

使用这个插件之后仍然可以用：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 组合法，具体可以参考大佬的文章：https://zhaozhiming.github.io...