antd官方只給出了使用create-react-app創(chuàng)建但沒有使用npm run eject命令項(xiàng)目的按需引入辦法洁奈，但是出于個(gè)性化定制，實(shí)際項(xiàng)目中很多都會(huì)運(yùn)行npm run eject命令术健。
npm run eject的項(xiàng)目如何按需引入？
按需引入，需要使用插件babel-plugin-import 來完成蕾久，步驟如下：
1.運(yùn)行npm i -S babel-plugin-import
2.打開根目錄的package.js文件，添加babel的配置拌夏，如下：
{
...
"browserslist":{...}
"jest": {...}
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
},
"proxy": "http://api.xxx.cn"
...
}
如何檢測(cè)是否按需引入腔彰？
App.js全局引入Antd.css
在頁(yè)面引入組件并使用
import {Button} from 'antd'
<Button>xxxx</Button>
3.執(zhí)行npm run build命令
4.對(duì)比打包出來的static文件夾，里面有css和js兩個(gè)文件夾辖佣。按需引入以后css文件的總體大小會(huì)小很多霹抛，js代碼則會(huì)增加一點(diǎn)。
結(jié)論
使用babel-plugin-import并配置"style": "css"會(huì)把a(bǔ)ntd的css代碼按需引入卷谈，所以css的會(huì)減少很多杯拐，那為何js代碼體積會(huì)增加呢？個(gè)人猜測(cè)是部分css代碼被直接嵌入到j(luò)s中了。
