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