antd 选择文件夹_antd 组件按需引入

antd官方只给出了使用create-react-app创建但没有使用npm run eject命令项目的按需引入办法，但是出于个性化定制，实际项目中很多都会运行npm run eject命令。

npm run eject的项目如何按需引入？

按需引入，需要使用插件babel-plugin-import 来完成，步骤如下：

1.运行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"

...

}

如何检测是否按需引入？

App.js全局引入Antd.css

在页面引入组件并使用

import {Button} from 'antd'

xxxx

3.执行npm run build命令

4.对比打包出来的static文件夹，里面有css和js两个文件夹。按需引入以后css文件的总体大小会小很多，js代码则会增加一点。

结论

使用babel-plugin-import并配置"style": "css"会把antd的css代码按需引入，所以css的会减少很多，那为何js代码体积会增加呢？个人猜测是部分css代码被直接嵌入到js中了。