React使用Antd按需加载过程

在使用Antd时，使用全局引入的方式，会造成整个项目目录过大，一些没有用到的UI组件也会被编译，项目的加载过程也会变得非常慢，为了防止造成这一系列麻烦，我们使用按需加载的方式进行引入。

项目引入Antd

React项目中可通过yarn等命令安装Antd

yarn add antd

Antd按需加载过程

通过使用react-app-rewired实现按需加载。

1. 安装相关依赖

npm i react-app-rewired babel-plugin-import customize-cra

yarn add react-app-rewired babel-plugin-import customize-cra

2. 在package.json中修改启动方式相关配置

原先的启动方式

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

修改后的版本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

3. 创建config-overrides.js文件进行配置

在根目录下新建config-overrides.js文件

const {
    override,
    fixBabelImports,
    addLessLoader
} = require("customize-cra");


module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true // change importing css to less
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            "@primary-color": "#1DA57A"
        }
    })
);

这里style为true表示使用less进行预编译，在addLessLoader中配置Antd的主题颜色，默认项目中不存在less和less-loader相关依赖，运行的时候可能会报错，这里我我们将依赖安装一下即可。

yarn add less
yarn add less-loader

注意，编译的时候可能会报以下错误： 该图来自于www.jianshu.com/p/5ee1e84ff… 这时候只需要将less-loader降级到5.0.0版本即可。

yarn remove less-loader
yarn add less-loader@5.0.0

除了该解决办法还可以通过对lessOptions配置项进行配置:(推荐使用)

const {
    override,
    fixBabelImports,
    addLessLoader
} = require("customize-cra");


module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true // change importing css to less
    }),
    addLessLoader({
        lessOptions:{
            javascriptEnabled: true,
            modifyVars: { '@primary-color':'green' },
        }
    })
);

总结

以上就是在React项目使用Antd按需加载的全过程以及配置过程中遇到的坑。转载请标明出处，谢谢！