# 在React中引入AntD的两种方法
AntD不推荐使用已构建的文件引入，这样做不利于底层依赖模块bug的快速修复。--AntD文档
# 一、直接引入
有区别与按需引入，直接引入AntD需要在入口的js文件，如index.js/index.jsx等，
入口的js文件就是挂载到根节点的那个：
// index.js
import 'antd/dist/antd.css'
// or 'antd/dist/antd.less'
import App from "./app"
...
ReactDOM.render(
<App />,
document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
这样做的好处是，后面挂载到根节点上的组件都可以直接写引入某个UI组件，如：
// App.jsx
import React from 'react';
import { Button } from 'antd';
function App() {
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 二、按需引入
直接引入相当于把AntD所有的组件包括样式文件引入了，打包时的依赖包体积也会大上不少，会影响加载速度。
按需引入可以只引入用到的UI组件和对应的样式文件，这样可以减少打包后的项目的依赖包的大小，从而优化首屏加载速度，提升用户体验。
# 1.手动按需引入
import Button from "antd/es/button";
import "antd/es/button/style/css";
1
2
2
需要手动引入UI组件和对应的组件的样式文件。
那么能不能引入UI组件的时候自动引入样式呢？这样还能少写一行？🤔 请看下一节。。
# 2.自动按需引入（需要插件）
# 首先安装babel-plugin-import插件
npm install babel-plugin-import --save -D #安装
1
# 然后修改package.json配置
package.json中添加如下高亮部分的配置内容。
...
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
},
"devDependencies": {
"babel-plugin-import": "^1.13.0"
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 最后重新npm start
此时，组件中只要引入UI组件即可实现自动引入样式。
import { button } from "antd"即可。