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

Ant Design React按需加载的更多相关文章

  1. react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)

    react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...

  2. React 按需加载 - 代码分隔

    代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // ...

  3. ant-design如果按需加载组件

    Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm in ...

  4. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

  5. [转] 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  6. 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  7. React(九)create-react-app创建项目 + 按需加载Ant Design

    (1)create-react-app如何创建项目我前面第一章介绍过了,这里就不过多写了, (2)我们主要来说说按需加载的问题 1. 引入antd npm install antd --save 2. ...

  8. ant Design和ant Design mobile的使用,并实现按需加载

    1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile y ...

  9. Ant Design按需加载

    不eject情况下配置antd按需加载 1.安装 react-app-rewired yarn add react-app-rewired 2. 项目根目录下新建 config-overrides.j ...

随机推荐

  1. STM32串口发送第一个字符丢失解决之道

    stm32用printf函数重定向到串口USART1发现第一个字符没打印出来具体如下: 刚开始修改fputc函数如下: int fputc(int ch,FILE *f){USART_SendData ...

  2. Spring Boot 启动报错 Exception in thread "main" java.lang.StringIndexOutOfBoundsException: String index out of range: 37

    使用命令 java -jar springBoot.jar  启动项目,结果报错如下: Exception at java.lang.String.substring(String.java:) at ...

  3. Difference between List View and DataGrid in WPF

    Well, in WPF the difference between ListView and DataGrid is just one. Editing. You need editing use ...

  4. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  5. linux iptables开放/关闭端口命令

    在CentOS/RHEL 7以前版本上开启端口 #开放端口:8080/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT#将更改进行保存/etc/ ...

  6. 用python玩微信(聊天机器人,好友信息统计)

    1.用 Python 实现微信好友性别及位置信息统计 这里使用的python3+wxpy库+Anaconda(Spyder)开发.如果你想对wxpy有更深的了解请查看:wxpy: 用 Python 玩 ...

  7. 利用最新Apache解析漏洞(CVE-2017-15715)绕过上传黑名单

    转载自:https://www.leavesongs.com/PENETRATION/apache-cve-2017-15715-vulnerability.html 目标环境: 比如,目标存在一个上 ...

  8. mysql之基本数据库操作(二)

    环境信息 数据库:mysql-5.7.20 操作系统:Ubuntu-16.04.3 mysql的启动.退出.重启 # 启动 $ sudo service mysqld start # 停止 $ sud ...

  9. 【swupdate文档 二】许可证

    许可证 SWUpdate是免费软件.它的版权属于Stefano Babic和其他许多贡献代码的人(详情请参阅实际源代码和git提交信息). 您可以根据自由软件基金会发布的GNU通用公共许可证第2版的条 ...

  10. [caffe error] undefined reference to `inflateValidate@ZLIB_1.2.9'

    undefined reference to `inflateValidate@ZLIB_1.2.9' Makefile.config添加一行LINKFLAGS := -Wl,-rpath,$(HOM ...