昨天我们演示了如何为React项目启用AntDesign组件，现在回顾一下，引入方法为：
import {DatePicker} from "antd";
import "antd/dist/antd.css"
虽然我们只用到了DatePicker组件的样式表，但是该方法却全局引入了所有AntDesign组件的样式表。这样做的结果就是将来会打包大量没用的代码。因此我们需要真正地实现按需导入AntDesign组件，只导入与我们用到的组件相对应的样式表，有两种解决方案：
手动引入
- 导入组件：
import DatePicker from "antd/lib/date-picker"; - 导入该组件对应的css文件：
import "antd/lib/date-picker/style/css"
之前全局导入样式表的方式打包之后的index.js文件有16.2M，通过这种方式引入组件之后，打包之后的index.js文件只有8.05M了。
使用babel-plugin-import（推荐）
通过以上手动引入的方式虽然可以解决问题，但是不免有些麻烦，我们可以通过装插件的方式轻松实现组件的按需导入：
- 装包：
npm i babel-plugin-import -D - 配置.babelrc文件：在plugins节点下新增规则
["import",{"libraryName": "antd", "style": "css"}]
然后只需从antd引入模块即可，无需单独引入样式，等同于手动引入的方式。
// babel-plugin-import 会帮助你加载JS和CSS
import {DatePicker} from "antd";