前端项目打包体积分析与优化

一、安装依赖分析工具

npm install webpack-bundle-analyz

二、修改webpack.config.js文件

1、导入上面下载的包

2、在plugins里创建实例

三、启动打包命令

npm run build

会弹出如下界面:

 

四、优化

1、通过CDN导入react-dom文件

修改webpack.config.js文件里的external配置

再次查看打包文件体积,发现已经没有了react-dom文件:

通过CDN引入react-dom:

在index.html里使用script标签进行引入:

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js></script>

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

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

相关文章

24-2-23

练习题 P1480 A/B Problem # A/B Problem ## 题目描述 输入两个整数 $a,b$&#xff0c;输出它们的商。 ## 输入格式 两行&#xff0c;第一行是被除数&#xff0c;第二行是除数。 ## 输出格式 一行&#xff0c;商的整数部分。 ## 样例 #1 ### 样例输入 #1 10 2 ### …

【Python_PySide6学习笔记(三十四)】组合选择框QComboBox类的基本用法

组合选择框QComboBox类的基本用法 组合选择框QComboBox类的基本用法前言正文1、创建组合选择框2、组合选择框添加多个选项3、组合选择框清空选项4、组合选择框添加单个选项5、组合选择框清除选项6、组合选择框获取当前选项文本7、组合选择框获取当前选项索引8、组合选择框信号:…

Windows 远程控制 Mac 电脑怎么操作

要从 Windows 远程控制 Mac 电脑&#xff0c;您可以使用内置 macOS 功能或第三方软件解决方案。以下是一些方法&#xff1a; 一、使用内置 macOS 功能&#xff08;屏幕共享&#xff09; 1、在 macOS 上启用屏幕共享 转至系统偏好设置 > 共享&#xff1b;选中“屏幕共享”…

八、线性代数二 ,矩阵的秩

目录 1、矩阵子式的定义与子式个数的计算&#xff1a; 2、矩阵秩的定义&#xff1a; 3、矩阵秩的计算方法&#xff1a; 4、矩阵秩的 性质&#xff1a; 线性代数四——几个重要的矩阵点积_线性代数 矩阵点积-CSDN博客 1、矩阵子式的定义与子式个数的计算&#xff1a; 概念&…

C# OpenCvSharp 利用白平衡技术进行图像修复

目录 效果 灰度世界(GrayworldWB)-白平衡算法 完美反射(SimpleWB)-白平衡算法 基于学习的(LearningBasedWB)-白平衡算法 代码 下载 C# OpenCvSharp 利用白平衡技术进行图像修复 OpenCV xphoto模块中提供了三种不同的白平衡算法&#xff0c;分别是&#xff1a;灰度世界(G…

华清远见嵌入式学习——驱动开发——day9

目录 作业要求&#xff1a; 作业答案&#xff1a; 代码效果&#xff1a; ​编辑 Platform总线驱动代码&#xff1a; 应用程序代码&#xff1a; 设备树配置&#xff1a; 作业要求&#xff1a; 通过platform总线驱动框架编写LED灯的驱动&#xff0c;编写应用程序测试&…

危险!Wyze 摄像头安全漏洞致1.3万用户隐私遭窥探

最近&#xff0c;一则关于 Wyze 摄像头再次出现安全漏洞的新闻引起了人们的广泛关注。据报道&#xff0c;该安全漏洞导致约1.3万用户的摄像头受到了未经授权的访问&#xff0c;使得这些用户的隐私信息遭到了窥视。这一事件再次引发了人们对网络安全的关注和讨论。 网络安全不仅…

代码随想录算法训练营第36天| Leetcode 435. 无重叠区间、763.划分字母区间、56. 合并区间

文章目录 Leetcode 435. 无重叠区间Leetcode 763.划分字母区间Leetcode 56. 合并区间 Leetcode 435. 无重叠区间 题目链接&#xff1a; Leetcode 435. 无重叠区间 题目描述&#xff1a; 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回需…

啊丢的刷题记录手册

1.洛谷题P1923 求第k小的数 题目描述 输入 n&#xff08;1≤n<5000000 且 n 为奇数&#xff09;个数字ai​&#xff08;1≤ai​<109&#xff09;&#xff0c;输出这些数字的第 k 小的数。最小的数是第 0 小。 请尽量不要使用 nth_element 来写本题&#xff0c;因为本题…

module ‘json‘ has no attribute ‘dumps‘

如果在使用Python的json模块时遇到AttributeError: module json has no attribute dumps错误&#xff0c;通常是因为在Python环境中json模块不支持dumps方法。这种情况可能是因为Python的json模块被重命名或修改过导致的。 解决方法可以尝试以下几种&#xff1a; 1.检查Pytho…

基于DPU和HADOS-RACE加速Spark 3.x

背景简介 Apache Spark&#xff08;下文简称Spark&#xff09;是一种开源集群计算引擎&#xff0c;支持批/流计算、SQL分析、机器学习、图计算等计算范式&#xff0c;以其强大的容错能力、可扩展性、函数式API、多语言支持&#xff08;SQL、Python、Java、Scala、R&#xff09…

springsecurity+vue前后端分离适配cas认证的跨域问题

0. cas服务搭建参考:CAS 5.3服务器搭建_cas-overlay-CSDN博客 1. 参照springsecurity适配cas的方式, 一直失败, 无奈关闭springssecurity认证 2. 后端服务适配cas: 参考前后端分离项目(springbootvue)接入单点登录cas_前后端分离做cas单点登录-CSDN博客 1) 引入maven依赖 …

鸿蒙LiteOS-M 内核初始化

目录 一、LiteOS-M 初始化内核二、LOS_KernelInit代码分析三、LOS_Start代码解析坚持就有收获 一、LiteOS-M 初始化内核 在LiteOS-M应用程序中&#xff0c;系统初始化如下&#xff1a; /*** brief This is the ohos entry, and you could call this in your main funciton af…

2024如何恢复旧版的Chrome的主题样式

起因 chrome 更新版本之后的主题样式变成了浅紫色的页签卡样式&#xff0c;感觉很不习惯&#xff0c;也很不喜欢 如何换回旧版主题 通过主题商店&#xff0c;安装旧版本的主题 主题商店搜索下面&#xff0c;或着直接访问下面的地址 Chrome Original White Theme https://…

助力智慧水务数据管理革新,TDengine 达成新签约!

在智慧水务系统中&#xff0c;通常需要对设备产生的液位、电流、水量等实时指标数据进行存储、分析和监控&#xff0c;这些数据属于典型的时序数据。随着设备数量的增加&#xff0c;数据量可能达到了百万甚至千万级别&#xff0c;传统的实时数据库或关系型数据库已经无法满足业…

vue手写卡片切换,并且点击获取到卡片信息

需求&#xff1a;做一个卡片样式的列表&#xff0c;之后有一些基本信息&#xff0c;之后卡片选中后样式不一样&#xff0c;默认选中第一个卡片&#xff0c;点击卡片后可以获取到卡片的信息 一、效果 二、关键代码 index默认重0开始,activeTable默认为0,0-0等于0&#xff0c;但…

Eureka:微服务中的服务注册与发现机制

引言 在微服务架构中&#xff0c;由于服务数量巨大并且各个服务的实例可能会频繁上下线&#xff0c;因此服务注册和发现机制至关重要。 那么&#xff0c;有什么工具或技术可以帮助我们解决这个问题呢&#xff1f; 答案就是Eureka。 一、Eureka简介 Eureka是Netflix公司开源的…

Facebook的数字社交使命:连接世界的下一步

在数字化时代&#xff0c;社交媒体已成为人们生活的重要组成部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;一直以来都在努力履行着自己的使命——连接世界。然而&#xff0c;随着时代的变迁和技术的发展&#xff0c;Facebook正在不断探索着连接世界的下…

Kafka:kafka的技术架构? ①

一、Kafka的优势 Apache Kafka是一个开放源代码的分布式事件流平台&#xff0c;成千上万的公司使用它来实现高性 能数据管道&#xff0c;流分析&#xff0c;数据集成和关键任务等相关的应用程序。 二、技术架构 0&#xff09;partition分区可以设置备份数&#xff0c;也可以设…

《Docker极简教程》--Docker卷和数据持久化--Docker卷的使用

一、基本操作 1.1 创建Docker卷 创建 Docker 卷是在 Docker 中管理持久化数据的重要步骤之一。通过 Docker 卷&#xff0c;可以将数据与容器解耦&#xff0c;实现数据的持久化存储&#xff0c;并且可以在容器之间共享数据。以下是创建 Docker 卷使用 docker volume create 命…