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中了。