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. SoC时钟系统简介

    1.SoC的时钟获得一般有: * 外部直接输入时钟信号,SoC有个引脚用来输入外部时钟信号,用的很少. * 外部晶振+内部时钟发生器产生时钟,大部分低频单片机都是这么工作的. * 外部晶振+内部时钟发 ...

  2. Android核心类源码分析

    Handler流程1.首先Looper.prepare()在本线程中保存一个Looper实例,然后该实例中保存一个MessageQueue对象:因为Looper.prepare()在一个线程中只能调用 ...

  3. jsoup select 选择器

    转载自:http://blog.csdn.net/zhejingyuan/article/details/11801027 方法 利用方法:Element.select(String selector ...

  4. vijos 1471 线性DP+贪心

    描述 Orz教主的成员为教主建了一个游乐场,在教主的规划下,游乐场有一排n个弹性无敌的跳跃装置,它们都朝着一个方向,对着一个巨大的湖,当人踩上去装置可以带你去这个方向无限远的地方,享受飞行的乐趣.但是 ...

  5. 32岁白发菜鸟拿2.6万年薪苦熬10年 NBA首秀便惊艳世人 科比书豪纷纷为他点赞

    这是一场普通的常规赛——斯台普斯球馆,湖人的赛季第81场.比赛的结果也没什么意外:客场作战的火箭106-99带走胜利.然而,这一场的斯台普斯却成了欢乐的海洋,现场甚至喊出了MVP的呼声,这份赞誉,送给 ...

  6. 【洛谷 P2756】 飞行员配对方案问题(二分图匹配,最大流)

    题目链接 这不是裸的二分图匹配吗? 而且匈牙利算法自带记录方案.. 但既然是网络流24题,那就用网络流来做吧. 具体就是从源点向左边每个点连一条流量为1的边,两边正常连边,流量都是一,右边所有点向汇点 ...

  7. MSSQL 视图/事务(TRAN[SACTION])/存储过程(PROC[EDURE])/触发器(TRIGGER )

    --视图 视图是一张虚拟表,它表示一张表的部分数据或多张表的综合数据,其结构和数据是建立在对表的查询基础上 视图在操作上和数据表没有什么区别,但两者的差异是其本质是不同: 数据表是实际存储记录的地方, ...

  8. JS 本地属性与继承属性

    判断是否拥有某种属性 1.in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' i ...

  9. Python 关于拷贝(copy)汇总(列表拷贝 // 字典拷贝 // 自定义对象拷贝)

    1.列表拷贝 引用是指保存的值为对象的地址.在 Python 语言中,一个变量保存的值除了基本类型保存的是值外,其它都是引用,因此对于它们的使用就需要小心一些.下面举个例子: 问题描述:已知一个列表, ...

  10. $.on方法与$.click()的区别

    1.$.on("click") 支持动态元素绑定事件,该事件是绑定到document上,只要符合条件的元素即可绑定事件,同时$.on()可以绑定多个事件 on方法 on(event ...