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. bzoj 1123 [POI2008]BLO Tarjan求割点

    [POI2008]BLO Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1540  Solved: 711[Submit][Status][Discu ...

  2. C语言实现单链表的遍历,逆序,插入,删除

    单链表的遍历,逆序,插入,删除 #include<stdio.h> #include<stdlib.h> #include <string.h> #define b ...

  3. intellij idea 中添加maven远程仓库

    在intellij idea 中配置好maven后 是这样的 如果加载失败,则需要自定义远程仓库,这里以阿里maven仓库为例, 在项目的pom文件中添加以下配置 <repositories&g ...

  4. 数据结构:K-D树

    K-D树实际上是一棵高维二叉搜索树,与普通二叉搜索树不同的是,树中存储的是一些K维数据 普通的二叉搜索树是一维的,当推广到K维后,就是我们的K-D树了 在K-D树中跟二叉搜索树差不多,也是将一个K维的 ...

  5. redis常用数据结构解析

    Redis是一个开源的Key-Value存储引擎,它支持string.hash.list.set和sorted set等多种值类型.由于其卓越的性能表现.丰富的数据类型及稳定性,广泛用于各种需要k/v ...

  6. 解决nginx在记录post数据时 中文字符转成16进制的问题【转载】

    1. 问题描述 nginx 在获取post数据时候,如果是中文,则转换成16进制显示在日志文件中,如下图所示.   Paste_Image.png 日志格式为: log_format postdata ...

  7. 嵌入式Nosql数据库——LiteDB

    LiteDB是一个开源的 .NET 开发的小型快速轻量级的 NoSQL 嵌入式数据库,特性: 无服务器的 NoSQL 文档存储,数据存储在单一文件中类似 MongoDb 的简单 API100% C# ...

  8. Redis 键值数据类型及基本操作

    到目前为止,Redis 支持的键值数据类型如下: 字符串(String) 哈希(Map) 列表(list) 集合(sets) 有序集合(sorted sets)   1. String 字符串类型 s ...

  9. JS之document对象(找元素、操作内容、操作属性、操作样式及4道例题)

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  10. Apache2.4+Tomcat7 集群

    Apache2.4+Tomcat7 集群: 1.下载并安装相对应的软件 apache下载地址:http://httpd.apache.org/ 这里使用apache2.4 tomcat下载地址:htt ...