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"
    ...
}
复制代码

如何检测是否按需引入？

1. App.js全局引入Antd.css

2. 在页面引入组件并使用

import {Button} from 'antd'
<Button>xxxx</Button>
复制代码

3.执行npm run build命令

4.对比打包出来的static文件夹，里面有css和js两个文件夹。按需引入之后css文件的整体大小会小不少，js代码则会增长一点。

结论

使用babel-plugin-import并配置"style": "css"会把antd的css代码按需引入，因此css的会减小不少，那为什么js代码体积会增长呢？我的猜想是部分css代码被直接嵌入到js中了。