react項目如何按需加載antdDesign組件分為兩種情況：

第一種手寫的，不使用腳手架：

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的按需加載》

?

?

?

使用腳手架create-react-app：

先安裝依賴：

yarn add babel-plugin-import --save-dev

然后
在package.json里面直接添加這行代碼

"babel": {"presets": ["react-app"],"plugins": [["import",{"libraryName": "antd","style": "css"}]]} 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react项目如何按需加载antdDesign组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。