ant-design若是按需加載組件 Ant Design React按需加載

Ant Design React按需加載

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

官網地址:https://ant.designhtml

 

1.安裝:react

npm install ant --save

 

2.引用:npm

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

 

3.安裝組件babel

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

 

 

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

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

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

 


 

測試:不作第三步及第四步,直接引用及加載Ant組件post

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

 

 

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

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

相關文章
相關標籤/搜索