React-reacte-app项目实现antD按需加载(2023)

news2024/12/27 13:44:56

出现的问题:

项目打包后,由于引入了antD,所以打包后的mani.js体积会非常大。相当于引入了全部的antD的代码。所以可以做一个优化:通过script标签引入antD,将其挂载在window上。使用antD组件的使用,直接从window上拿。

在使用react-create-app创建出的react项目里。是没有webpack.config.js文件的。只有在创建项目的过程中可以配置。如果想实现AntD的按需加载,那么简单的方式是依靠webpack的能力去实现。

打开webpack.config.js(config-overrides.js)

基于上面的问题,为了配置webpack我们可以使用一个方法。

(1)首先安装react-app-rewired

npm install react-app-rewired

(2)修改package.json文件的启动命令和打包命令

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

(3)在项目根目录下新建config-overrides.js文件。

module.exports = function(config){
  return config
}

这里面的config就是webpack的config配置。如果想要修改webpack的配置,就可以在这里对config进行操作。

通过CDN引入AntD

然后就要通过script标签引入antD组件了。这里有一个问题就是,官网上说了这么一段话:

注意:antd.js 和 antd.min.js 依赖 reactreact-domdayjs,请确保提前引入这些文件。

也就是说直接通过script标签引入antD一定会,报出xxx is undefined的错误。为了解决这个问题,我们要在引入antD的时候,将react , react-dom ,dayjs都引入。

这里要注意的是,在引入资源的时候版本怎么确定?我如果随意引用版本,比如用了低版本的antD但是用了高版本的dayjs,那么是一定有问题的。
所以,要知道antD中引入了什么版本的dayjs,再去通过cdn引入对应版本的资源。
查看dayjsde版本依赖关系的指令可以通过

npm ls dayjs

image.png

这样就可以看到antd中dayjs需要的版本了。
在index.html中,通过script标签进行引入:

    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.7/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.6/antd.min.js" integrity="sha512-lp26u40m4VHdnHJPrOwtPvqSRdL5VIaNlsZgROrkrCjHhvhM/NprSzol81FjgK3be0CxGv2cH0jLq7jedxS9Mg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

webpack配置

如果已近完成了上面的配置。那么你的项目应该还是个空白页。还会报错,但是控制台已经有了antd和react,reactDom的全局变量了。但还是没有解决问题,因为webpack在打包的过程中,是通过查找node_modules包里面的资源。\

但是我们希望的是通过在全局变量里面找到对应的资源,所以我们要在上面的config-overrides.js里配置externals。

module.exports = function(config){
  config.externals = {
    'react':'React',
    'react-dom':'ReactDOM',
    'antd': 'antd'
  }
  return config
}

这样webpack在start 或者 build 的时候,碰到react ,react-dom, antd就不会再从node_modules里去找了。直接略过。
以上就是webpack打包react-create-app中,如果实现antD按需加载的内容了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/596744.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2.矢量分析

目录 一.标量函数和矢量函数 二.矢端曲线 三.矢量函数导数和微分 1.导数 2.导数的几何意义 3.微分 4.矢量导数性质 5.例题 四.矢量导数的应用 1.几何应用 1.曲线的切线和法平面 2.曲面的法线和法平面 2.物理应用 3.两大典型问题 五.矢量函数的积分 如果第一章我…

WOT全球技术创新大会开幕倒计时——好内容才是永远的底气

距离6月16日-17日召开的WOT全球技术创新大会还有半个月时间&#xff0c;所有讲师、议题均已就位。本届WOT不仅囊括2023年最火的技术——AIGC、大模型、大算力&#xff0c;也有被技术人永恒关注的热点话题——多云实践、业务架构演进、效能提升。 筹备数月之久&#xff0c;50来…

Intel® 以太网800 系列网络适配器 – DPDK上的性能演进

1. 介绍 Intel以太网800系列网络适配器提供卓越的性能&#xff0c;以满足各种工作负载的要求。800系列提供了数据包分类和排序优化、硬件增强的定时能力以及完全可编程的流水线。Intel的以太网产品组合始终提供可靠的体验和经过验证的互操作性。 在DPDK中&#xff0c;ICE轮询模…

CDN控制平台操作指引之账号注册及添加域名

一、注册账户及登录 &#xff08;一&#xff09;请确认您已经注册了火伞云账号并完成账号实名认证。如果未注册&#xff0c;请先完成账号注册和实名认证。 &#xff08;二&#xff09;登录火伞云融合CDN管理平台。 二、添加加速域名 使用火伞云融合CDN加速指定网站&#xff…

NodeJs之Ajax技术

1. 初识Ajax ./public/Ajax.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&qu…

ArcGIS Pro地图和场景

目录 1 地图和场景 1.1 地图 1.2 场景 2 图层 2.1 图层类型 2.1.1 要素图层&#xff08;Feature layers&#xff09; 2.1.2 栅格图层&#xff08;Raster layers&#xff09; 2.1.3 场景图层&#xff08;Scene layers&#xff09; 2.1.4 服务图层&#xff08;Service la…

机器视觉怎么对陶瓷板的外观尺寸进行自动检测?

随着工业自动化的不断发展&#xff0c;机器视觉技术在制造业中的应用越来越广泛。在陶瓷板行业中&#xff0c;机器视觉技术可以用于自动检测陶瓷板的外观尺寸&#xff0c;提高生产效率和产品质量。下面我们来介绍机器视觉如何对陶瓷板的外观尺寸进行自动检测。 一、检测原理 …

第2关:socket编程

第2关&#xff1a;socket编程 任务描述相关知识1、Socket2、socket函数3、bind函数4、listen、connetct函数5、accept函数6、read、write函数7、close、shutdown函数8、三次握手9、数据传输10、四次挥手 编程要求及注意事项测试说明参考代码 任务描述 本关任务&#xff1a; 编…

轻松掌握,板对板连接器选型指南

一、什么是板对板连接器&#xff1f; 板对板连接器(简称BTB)&#xff0c;是精密电路中电源和信号耦合连接必不可少的器件。随着产品复杂度和电路设计规模的不断提升&#xff0c;板对板连接器也沿着市场需求向着高速率&#xff0c;高功率密度&#xff0c;轻薄化几个方向发展。 …

chatgpt赋能python:为什么Python不适合做SEO?——解析

为什么Python不适合做SEO&#xff1f;——解析 Python作为一种非常方便的编程语言&#xff0c;在数据处理、人工智能等方面有着广泛的应用。然而&#xff0c;在SEO领域&#xff0c;Python似乎并不受欢迎。本文将从Python不适用于SEO的几个方面做出详细的介绍&#xff0c;并为读…

WPF .Net6中使用Prism

.NET 6 是微软长期支持&#xff0c;并在移动、桌面、IoT 和云应用之间统一了 SDK、基础库和运行时。 Prism为程序设计提供指导,旨在帮助用户更加容易的设计和构建丰富、灵活、易于维护WPF桌面应用程序。Prism使用设计模式&#xff08;如MVVM,复合视图,事件聚合器&#xff09;…

02 【el和data的两种写法 MVVM模型】

02 【el和data的两种写法 MVVM模型】 1.el和data的两种写法 el有2种写法 创建Vue实例对象的时候配置el属性 先创建Vue实例&#xff0c;随后再通过vm.$mount(‘#root’)指定el的值 data有2种写法 对象式&#xff1a;data&#xff1a; { }函数式&#xff1a;data() { retur…

国产给力啊啊啊----国产MCU-CW32F030开发学习

国产MCU-CW32F030开发学习 1. 相关资料下载 1.1 武汉芯源半导体 武汉芯源半导体官网 武汉芯源半导体 武汉芯源 21ic 电子论坛 21ic 电子论坛 1.2 CW32F030系列资料 CW32F030技术文档 • 内核&#xff1a;ARM Cortex-M0 – 最高主频64MHz • 工作温度&#xff1a;-40℃ 至…

Java Number Math character类

文章目录 一、Java Number& Math 类1、Java Math 类2、Number & Math 类方法3、Math 的 floor,round 和 ceil 方法实例比较 二、Java Character 类1、转义序列2、character 方法 总结 一、Java Number& Math 类 一般地&#xff0c;当需要使用数字的时候&#xff0…

掌握海外新闻发布技巧,媒介易助你在全球获得曝光

​海外新闻稿发布平台是企业在拓展海外市场、增加品牌曝光度和提升知名度方面非常重要的工具。本文将介绍海外新闻稿发布平台的作用和建议&#xff0c;并提供一些建议&#xff0c;帮助企业更好地利用海外新闻稿发布平台进行营销推广。 一、海外新闻稿发布平台的作用 海外新闻稿…

chatgpt赋能python:Python人脸验证:简介与应用

Python人脸验证&#xff1a;简介与应用 Python作为一种强大的脚本语言&#xff0c;正变得越来越流行。它是一种易于学习和使用的语言&#xff0c;不仅在科学计算领域有很大的用武之地&#xff0c;而且在机器学习和人工智能领域也变得越来越流行。本文将重点介绍Python在人脸验…

通过 Gorilla 入门机器学习

机器学习是一种人工智能领域的技术和方法&#xff0c;旨在让计算机系统能够从数据中学习和改进&#xff0c;而无需显式地进行编程。它涉及构建和训练模型&#xff0c;使其能够自动从数据中提取规律、进行预测或做出决策。 我对于机器学习这方面的了解可以说是一片空白&#xf…

电商API分享:获取淘宝商品历史价格api调用示例 参数说明

在网络购物中&#xff0c;TAO宝是相信许多人的首选平台之一&#xff0c;而对于一个谨慎的购物者来说&#xff0c;价格的变化是非常重要的。所以获取淘宝商品历史价格&#xff0c;可以帮助购物者更好地作出决策&#xff0c;实现理性消费。获取淘宝商品历史价格主要能帮助到我们做…

PLC信号发生器(SCL+梯形图)

信号发生器的应用请参看下面的博客文章,在演示滤波器的作用时,我们可能也会用到信号的叠加等。 博途PLC滤波指令 Filter_PT1、Filter_PT2、Filter_DT1详细使用说明(含Simulink+博途PLC仿真)_RXXW_Dor的博客-CSDN博客博途S7-1200/1500PLC的PID控制和详细使用说明,请参看下…

自定义ViewGroup实现流式布局

目录 1、View的绘制流程 2、自定义ViewGroup构造函数的作用 3、onMeasure 方法 3.1、View的度量方式 3.2、onMeasure方法参数的介绍 3.3、自定义ViewGroup onMeasure 方法的实现 4、onLayout方法 5、onDraw方法 6、自定义View的生命周期 7、自定义流式布局的实现 扩展&#xff…