React按需加载Antd UI

我们通常使用Antd UI方便一点 就直接在index.js中引入antd/dist/antd.min.css了
但你有没有想过 可能我们项目中就用到部分组件 但我们却引入了全部 有点浪费性能啊
这是我的react项目

应用了几个button按钮
我先把index.js中的import "antd/dist/antd.min.css"注释掉

可以看到 我们组件的样式就没了 那我们来用第一种按需加载的方式

import 组件代理名 from ‘antd/es/要用的组件包’;
import “antd/es/要用的组件包/style/css”;

例如我们这里要用button按钮 就这样写

import Button from 'antd/es/button';
import "antd/es/button/style/css";

这样我们的样式就又回来了

重点是 这样我们就只引入了button包下的组件和css

然后我们来试第二种方式

首先我们先执行

npm run eject

暴露出项目的webpack配置文件
然后我们中就会多一个这样的config文件夹

然后在项目终端引入

npm install babel-plugin-import --save-dev

然后会发现我们的配置文件发生了不小的变化

然后在package.json中找到对象babel
在里面加入代码

 "plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

然后 要安装 安装antd 如果你项目之前就安装过了 就不需要了 安装antd 代码如下

npm i antd --save 

还有安装 babel-plugin-import 如果你有安装过就不需要了
安装代码如下

npm i babel-plugin-import --save-dev 

最后 按我的个人习惯就是再引入一下整体的依赖

npm i

然后我们将 antd 相关的引入代码通通去掉
我们某个组件要用antd的组件 直接
import { 组件名 } from ‘antd’;
引入一下这个组件就好了
例如我们要用button按钮

import { Button } from 'antd';

参开代码如下

import './App.css';
import React from "react";
import { Button } from 'antd';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
 
  render(){
    return (
      <div className="App">
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <br />
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </div>
    )
  }
}

export default App;

效果如下

如果你没有引入 antd的css任何一个文件 且 样式也出来了 说明 就已经完成按需加载了