Ant Design React按需加載

Ant Design是阿里巴巴為React做出的組件庫，有統(tǒng)一的樣式及一致的用戶體驗(yàn)

官網(wǎng)地址：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文件中增加以下內(nèi)容，即可進(jìn)行按需加載

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

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

?

---

?

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

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

?

?

注意：我現(xiàn)有的項(xiàng)目是全部手寫，使用Webpack進(jìn)行打包，而并不是create-react-app生成的項(xiàng)目模板，如果是使用create-react-app方式生成的項(xiàng)目模板，需要使用另外的方式

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/yayaxuping/p/10951770.html

總結(jié)

以上是生活随笔為你收集整理的ant-design如果按需加载组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。