实现AntDesign组件的按需导入

昨天我们演示了如何为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";