【React】配置ant design按需加载步骤

首先，对antd进⾏配置按需加载，需要对create-react-app 的默认配置进⾏⾃定义

所以第一步：需要更改我们的启动插件

在项目中执行命令

yarn add react-app-rewired customize-cra

注意：如果还没安装yarn的可以先执⾏npm install yarn -g 进⾏安装

第二步：修改对应的packag.json文件

"scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

第三步：在项目的根目录中创建文件config-overrides.js，主要用于修改默认配置

第四步：执⾏安装 babel-plugin-import插件，安装命令：yarn add babel-plugin-import

第五步：修改config-overrides.js⽂件内容

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

module.exports = override(

    fixBabelImports('import', {

        libraryName: 'antd',

        libraryDirectory: 'es',

        style: 'css',

    }),

);

这时候我们在引入antd组件的时候就不需要引入css了，

直接使用import { Button } from 'antd'就可以正常显示了

 就这一个按需加载因为命令不知道咋搞的执行错了位置，搞一个小时冲突，气死我了！

一个小时前：前端好有意思啊~~~

一个小时后：前端真tm难啊呜呜呜。。。救救我！救救我！救救我！