Ant Design React按需加载

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

转载于:https://www.cnblogs.com/yayaxuping/p/10951770.html

ant-design如果按需加载组件相关推荐

webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
react --- 按需加载组件
问题描述使用 antd库时使用按钮,须导入如下 import Button from 'antd/lib/button' import 'antd/dist/antd.css' 这样会导入全局的样 ...
ant design pro 页面加载原理及过程，@connect 装饰器
一.概述以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ...
vue3+ant design vue 动态加载Icon图标
问题与思路在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
antd 按需加载，antd定制主题，antd上传组件，在线换肤
antd 按需加载组件,antd按需加载样式使用 babel-plugin-import,babel模块化导入插件,兼容antd,antd-mobile,lodash等库配置:{ "li ...
ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...

ant-design如果按需加载组件

Ant Design React按需加载

ant-design如果按需加载组件相关推荐

最新文章

热门文章