昨天我們演示瞭如何爲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";