Ant Design React按需加載

Ant Design是阿里巴巴爲React作出的組件庫，有統一的樣式及一致的用戶體驗

官網地址：https://ant.design

 

1.安裝：

npm install ant --save

 

2.引用：

import { Alert, Form, Input, Button, Checkbox, Row, Col, message, Modal, Icon } from 'antd';

 

3.安裝組件

npm install babel-plugin-import --save -D

 

 

4.按需加載Ant Design，在.babelrc文件中增長如下內容，便可進行按需加載

參考地址：https://ant.design/docs/react/practical-projects-cn

    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ],
        "transform-runtime"
    ]

 

---

 

測試：不作第三步及第四步，直接引用及加載Ant組件

相同代碼，增長了第三步及第四步，按需加載Ant組件，發現其中打包出來的文件是比較小的

 

 

注意：我現有的項目是所有手寫，使用Webpack進行打包，而並非create-react-app生成的項目模板，若是是使用create-react-app方式生成的項目模板，須要使用另外的方式

請參考《react配置antd的按需加載》