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. [技巧篇]09.Struts2豁然开朗的一些配置[记得要看哟]

    这里留下一个重要的信息,关于部署描述符,关于struts2的核心配置文件,关于JSON插件的属性配置介绍,还有特别重要的JSON的注解 关于struts.xml的配置,这里学到了新的知识 使用插件方式 ...

  2. 理解JavaScript的prototype和__proto__

    首先,要明确几个点: 1.在JS里,万物皆对象. 方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__pro ...

  3. Axis2 WebService(配置、发布、调用)

    准备工作 1.下载:axis2-1.5.4-bin.zip,axis2-1.5.4-war.zip 下载地址:http://axis.apache.org/axis2/java/core/ 2.环境变 ...

  4. sqlserver xml转表 及(cross apply与outer apply)

    一. 需求是需要把','分割的字符串转为表,便于做关联查询,于是发现可以通过xml转为表,如下: declare @XXX xml set @XXX = ' <v> <aa>1 ...

  5. asyncio 实现 aiohttp

    #asyncio 没有提供http协议的接口 aiohttp import asyncio import socket from urllib.parse import urlparse async ...

  6. 企业CEO最核心的应该是销售意识

    一个企业的本质是赚利润,利润怎么来?靠卖东西,所以企业里面最重要的应该是销售人员.在一些500强的外企里有一个规定,没有做过销售的人是很难升到总经理的,在以色列的军队中,没有当过班长,是不可以被提拔为 ...

  7. UIToolBar的半透明属性设置

      UIToolBar的半透明属性设置style:Translucent(Ps:长得很像翻译translation)   https://www.evernote.com/shard/s227/sh/ ...

  8. scrapy学习笔记一

    以前写爬虫都是直接手写获取response然后用正则匹配,被大佬鄙视之后现在决定开始学习scrapy 一.安装 pip install scrapy 二.创建项目 scrapy startprojec ...

  9. Javascript prototype 及 继承机制的设计思想

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  10. python基础===zmail,收发邮件的模块

    项目地址: GitHub:https://github.com/ZYunH/zmail  介绍: https://mp.weixin.qq.com/s?__biz=MzAxMjUyNDQ5OA==&a ...