使用create-react-app脚手架按需加载antd

当我们做项目时，有时只会用到几个常用的Ui组件,但是你并不想把整个antd包引入进来，这时你可以尝试下按需引入antd的相关组件:

1. 直接引入，首先安装npm install antd –save，安装完成之后你会发现antd的安装包其实是放在node_modules文件夹下的所以你可以在需要用到组件里这样使用：

import Button from 'antd/lib/button';  //找到node_modules文件夹下的antd/lib/button/index.js直接引入
import 'antd/lib/button/style' //找到对应文件夹下的样式直接引用
复制代码

2. 执行npm run eject，它会暴露出webpack的配置文件，项目会多出 config 和 scripts 文件夹。

安装完 antd 和 babel-plugin-import 后，在packge.json文件下添加

 "babel": {
        .....
        "plugins": [
            [
                "import",
                {
                    "libraryName": "antd",
                    "style": "css"
                }
            ]
        ]
    }
复制代码

3. 由于执行npm run eject后项目会多出一堆我么不想要的配置，所以还可以使用antd官网推荐的写法:3x.ant.design/docs/react/…