react按需导入antd

react中比较出名的组件库之一就是ant design，对于初学者，只需要npm下载ant组件库，然后分别导入相应的组件，引入样式即可使用。但是这种方式并不是很好，因为我们使用的组件是有限的，但是却引入了所有的antd样式，造成了性能的浪费，因此我们需要按需引入相应的组件。

这里纪录一下，如何不用webpack，只在原有的create-react-app创建的目录下面，按需引入antd组件

• 第一步肯定需要安装antd对应的组件库，这里不做过多描述
• 安装相应的插件，用来覆盖create-react-app的相关配置： npm i react-app-rewired customize-cra

  安装完之后，在项目的package.json下面，替换相应的代码，使react-app-rewired接管create-react-app

 "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",
    }

• 在根目录下面创建config-overrides.js文件，并在文件之中配置：

const { override, fixBabelImports } = require('customize-cra');
     module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd',
         libraryDirectory: 'es',
         style: 'css',
       }),
     );

• 安装babel： npm i babel-plugin-import

重新启动项目， 这时，已经完成了按需导入的配置，我们引入一个button组件，可以看到，不需要在单独引入样式，文件会自动将相应组件的样式给配备好

import React from "react";
import {Button} from "antd";

function App(props) {
    return (
        <div>
            <Button>按钮</Button>
        </div>
    )
}

export default App;

antd中默认使用less作为样式，如果我们想要自己添加一些样式，也需要使用到less，我们需要这样配置，首先npm安装less,less-loader,然后更改配置文件如下：

    const { override, fixBabelImports, addLessLoader } = require('customize-cra');
  
    module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
       style: true,
    }),
     addLessLoader({
      lessOptions:{
            javascriptEnabled:true ,
            ModifyVars:{  '@primary-color':'#eee'  } 
        }
     }),
    );

这样就既可以实现按需加载，又能使用less了