react配置Ant Design按需加载

最新推荐文章于 2021-03-11 00:53:24 发布
最新推荐文章于 2021-03-11 00:53:24 发布
阅读量402 收藏 1
点赞数 1
分类专栏： React 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45741804/article/details/104525184
版权
本文介绍了如何在React项目中配置Ant Design的按需加载，以减小项目体积并提升性能。首先，需要安装相关依赖，然后修改package.json配置，创建并编辑配置文件，最后安装并配置babel-plugin-import，重启项目即可实现按需加载。
摘要由CSDN通过智能技术生成

antd这个UI库体积较大,在项目中如果我们采取全部引入的方式将会使项目的性能收到大幅降低,手动按需加载的话当然不是我们希望的做法,所以配置自动按需加载还是很有必要的下面来看如何配置。（注：前提是项目已经安装了antd）

1.安装相关依赖包：

yarn add react-app-rewired customize-cra

这里react-app-rewired 不用弹射就可以配置webpack
customize-cra 自定义脚手架环境

2.打开package.json文件修改下方配置：

"scripts": {
   
      "start": "react-app-rewired start",
       "build": "react-app-rewired build"
最低0.47元/天 解锁文章
Chris.Chang
关注
专栏目录
22React UI框架 Antd (Ant Design)配置react-app-rewired按需加载Antd的css
03-01
为了解决这个问题，我们可以使用`react-app-rewired`来配置按需加载Antd的CSS，从而优化性能。 首先，`react-app-rewired`是用于绕过Create React App的默认配置，以便自定义Webpack配置的工具。在不修改Create ...
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 ...
vue+vant使用图片预览功能ImagePreview的问题解决
11-20
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：      着实让员外百思不其解，在调用vant 的 ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview  也实现不了，因为根本就拿他没有一点办法。同时可以看到，这个图片预览的 html 是挂载在 window 上面
用create-react-app+antd时实现按需加载
weixin_33863087的博客
11-16 221
首先应该引入babel-plugin-importnpm i babel-plugin-import复制代码然后在package.json添加"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", ...
create-react-app配置ant-design-mobile按需导入
qq_41519363的博客
09-08 297
ant-design-mobile官网好久不更新了, 导致按照官网配置 config-overrides.js 时报错 按照官网步骤, 还需要安装 customize-cra cnpm install --save-dev customize-cra config-overrides.js: const { override, fixBabelImports } = require("customize-cra"); module.exports = override( fixBabelImports
React种使用Ant Design按需加载
lass_huahua的博客
03-27 459
按需加载有两种方法 1.手动引入，比如: import DatePicker from 'antd/es/date-picker'; // 加载 JS import 'antd/es/date-picker/style/css'; // 加载 CSS import Button from 'antd/es/Button'; // 加载 JS import 'antd/es/Button/sty...
react中使用ant-design步骤
przlovecsdn的博客
08-16 2638
step1、 npm install antd --save step2、npm install babel-plugin-import --save-dev step3、分别在config/webpack.config.dev.js、config/webpack.config.prod.js中配置 https://github.com/ant-design/babel-plugin-im...
React降级配置及Ant Design配置详解
10-17
对于Ant Design的配置，首先安装`antd`库，然后安装按需加载组件和样式的插件，例如`babel-plugin-import`。在`package.json`的`babel`配置段内，设置相应的规则以实现按需加载。选择一个组件（如`Button`）进行测试...
react脚手架如何配置less和ant按需加载的方法步骤
10-17
### React脚手架配置...以上步骤及知识点涵盖了从React脚手架搭建、Less样式语言集成到Ant Design按需加载配置的全过程。通过这些步骤，可以有效地将Less和Ant Design集成到使用Create React App搭建的React项目中。
19 React——Ant Design（按需加载样式文件）
X北辰北的博客
11-06 3818
      在上篇文章中我们简单介绍了Ant Design组件的使用，但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件，这对于前端页面来说并不符合其开发要求，接下来我们介绍css样式文件的按需加载。 1 首先，我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具，输入“npm install react-app-rewired --save”，如图： 2 ...
ant-design在create-react-app中配置按需加载组件
dying 搁浅
03-26 4402
配置方法 在官方找到两种配置方法: 方法1 文档地址1 方法2 文档地址2 在这里推荐使用第二种方法。 在使用第一种方法时因为修改 /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build&qu
实现Ant Design按需加载
duansamve的博客
03-03 2784
首先安装babel-plugin-import： npm i babel-plugin-import -S 然后在.babelrc中添加如下代码： // .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `styl...
Antd按需打包
魑魅魍魉9527
09-17 599
安装 yarn add antd@3.x 安装 yarn add react-app-rewired customize-cra 修改package.json "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", 安装 yarn add babel-plugin-import 修改config-overrides.js const { overr
1、react+antd 搭建工程 antd按需加载配置
zyxzp2012的博客
03-23 746
1、创建工程 create-react-app bike-antd 2、引入 antd yarn antd 3、antd组件按需加载配置 此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。 引入 react-app-rewired 并修改 packa...
Ant Design按需加载
w123452222的博客
08-06 3616
最近在使用支付宝公司开源的Andt-Design做后台管理的界面，刚开始每次用到组件的时候都要引入他的样式文件，不胜其烦..... 最后忍无可忍看看别的小姐姐是怎么写的，才知道有按需加载这一功能，没看仔细API,罪过！ 1、首先暴露自己的webpack配置文件 yarn eject将所有的配置文件暴露出来，好让可以修改脚手架的配置信息 2、安装需要的东西 yarn add babel-p...
Ant Design of React的安装、按需加载
DOM曼珠沙华的博客
03-11 819
戳这里 官方文档 Ant Design 是ui组件库，具体简介看官网。 antd需要在React项目内安装，意思就是需要先创建好项目，可以戳查看如何创建项目，或者查看官网。在项目创建好之后，进行安装。 Antd安装 这里需要进行项目内安装，有三种方式。 第一种npm： npm install antd --save 第二种cnpm： cnpm install antd --save 第三种yarn： yarn add antd 这三种方式，任选一种即可。 ...
react中ant-mobile中实现按需加载模块
qq_41834059的博客
06-23 1539
create-react-app安装及使用 npm install -g create-react-app create-react-app my-app   蚂蚁金服的ant-mobile UI地址 https://mobile.ant.design/docs/react/use-with-create-react-app-cn 第一步需要引入 npm install...
antd按需加载
Keep It Simple, Stupid
02-19 3244
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中后台设计语言，利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能，全面提高中后台产品体验和研发效率。 本来react首页渲染速度就很慢，ant按需加载是非常有必要的。 打开react-script/config/webpack.config.dev.js 找到“Process JS with Babel.” 在o...
React+AntDesign学习系列之《搭建React+AntDesign框架》
总该长大了的博客
12-18 1908
react学习之路react+AntDesign搭建环境准备全局安装create-react-app脚手架创建项目命名为：antd-demo1引入Ant Design组件库启动项目 react+AntDesign搭建 大家好！之前有做过react+AntDesign的项目，但是都是别人搭建好的，我需要实现功能就可以，现在有时间了，想好好钻研一下，往深层学习一下 环境准备 1.安装Noje.js(全...
React脚手架配置Less与Ant按需加载教程
本文档详细介绍了如何在使用React官方推荐的create-react-app脚手架的基础上，配置Less样式语言和Ant Design组件按需加载的方法。以下是主要步骤： 1. **React脚手架搭建**： - 全局安装create-react-app：确保已...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值