react项目如何按需加载antdDesign组件

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"
            }
          ]
        ]
    }