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

一、安装依赖分析工具

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://xiahunao.cn/news/2803717.html

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

相关文章

【前端素材】推荐优质后台管理系统GramOs平台模板(附源码)

一、需求分析 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;它通常作为一个独立的后台界面存在&#xff0c;供管理员或特定用户使用。下面详细分析后台管理系统的定义和功能&#xff1a; 1. 定义 后台管理系统是一个用于管理和控制网站、应用程序或系统…

Linux环境非root用户配置SSH免密登录,并解决登录仍提示输入密码

Linux环境非root用户配置SSH免密登录&#xff0c;并解决登录仍提示输入密码 ssh免密登录的简单理解 以A和B进行举例&#xff1a;A免密登录B &#xff08;即在A服务器输入命令&#xff1a;ssh 非root用户名B的IP地址&#xff09;可以直接免密码直接登录 A生成私钥和公钥&#…

QT基本组件

四、基本组件 Designer 设计师&#xff08;重点&#xff09; Qt包含了一个Designer程序&#xff0c;用于通过可视化界面设计开发界面&#xff0c;保存文件格式为.ui&#xff08;界面文件&#xff09;。界面文件内部使用xml语法的标签式语言。 在Qt Creator中创建文件时&#xf…

​分享87个Html企业模板,总有一款适合您

分享87个Html企业模板&#xff0c;总有一款适合您 87个Html企业模板下载链接&#xff1a;https://pan.baidu.com/s/1iBpfaBRgMJBv4pj07rZhOg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集…

【STM32】Keil RTE使用记录

0 前言 最近因为任务需要&#xff0c;再次开始研究STM32&#xff0c;打算过一遍之前记录的笔记&#xff0c;在创建工程模板时&#xff0c;突然发现一个之前被自己忽略的东西&#xff0c;那就是创建项目时会弹出的Run-Time Environment&#xff0c;抱着好奇的心态去找了一些资料…

Rust: reqwest库示例

一、异步处理单任务 1、cargo.toml [dependencies] tokio { version "1.0.0", features ["full", "tracing"] } tokio-util { version "0.7.0", features ["full"] } tokio-stream { version "0.1" }…

【学习笔记】数据结构与算法03:栈与队列

知识出处&#xff1a;Hello算法&#xff1a;https://www.hello-algo.com/. 文章目录 2.2 栈和队列2.2.1 「栈 stack」2.2.1.1 栈的常用操作2.2.1.2 栈的典型应用 2.2.2「队列 queue」2.2.2.1 队列的常用操作2.2.2.2 队列的典型应用 2.2.3 双向队列 「double-ended queue」2.2.3…

论文阅读——SimpleClick

SimpleClick: Interactive Image Segmentation with Simple Vision Transformers 模型直接在VIT上增加交互是分割 用VIT MAE方法训练的预训练权重 用交互式分割方法微调&#xff0c;微调流程&#xff1a; 1、在当前分割自动模拟点击&#xff0c;没有人为提供的点击 受到RITM启发…

如何使用Douglas-042为威胁搜索和事件应急响应提速

关于Douglas-042 Douglas-042是一款功能强大的PowerShell脚本&#xff0c;该脚本可以提升数据分类的速度&#xff0c;并辅助广大研究人员迅速从取证数据中筛选和提取出关键数据。 该工具能够搜索和识别Windows生态系统中潜在的安全漏洞&#xff0c;Douglas-042会将注意力放在…

Jmeter基础(2) 目录介绍

目录 Jmeter目录介绍bin目录docsextrasliblicensesprintable_docs Jmeter目录介绍 在学习Jmeter之前&#xff0c;需要先对工具的目录有些了解&#xff0c;也会方便后续的学习 bin目录 examplesCSV目录中有CSV样例jmeter.batwindow 启动文件jmeter.shMac/linux的启动文件jmete…

学习负载均衡的算法

什么负载均衡 负载均衡是一种计算机技术&#xff0c;用于在多个系统、网络链接、硬盘驱动器、CPU等之间分配工作负载&#xff0c;以优化资源使用、最大化吞吐量、最小化响应时间、并避免任何单一资源的过载。在网络负载均衡的情况下&#xff0c;它可以帮助将网络流量有效地分配…

300分钟吃透分布式缓存-11讲:MC如何淘汰冷key和失效key?

淘汰策略 Mc 作为缓存组件&#xff0c;意味着 Mc 中只能存储访问最频繁的热数据&#xff0c;一旦存入数据超过内存限制&#xff0c;就需要对 Mc 中的冷 key 进行淘汰工作。Mc 中的 key 基本都会有过期时间&#xff0c;在 key 过期后&#xff0c;出于性能考虑&#xff0c;Mc 并…

SpringBoot中Redis缓存的使用

目录 1 前言 2 实现方法 2.1 查询数据时 2.2 修改数据 1 前言 对于一些不常改变&#xff0c;但又经常查询的数据&#xff0c;我们可以使用Redis缓存&#xff0c;来缓解数据库的压力&#xff0c;其中的逻辑如下&#xff1a; 2 实现方法 2.1 查询数据时 一般在控制类查询方…

SMIC思洣客矩阵:重塑数字经济的未来

经济的发展 经济是供需满足的过程&#xff0c;它涵盖了社会物资的生产和再生产过程。在这个过程中&#xff0c;经济活动遵循着生产和再生产的规律&#xff0c;通过生产、分配、交换和消费的过程&#xff0c;不断地形成和再造价值。从传统的市场经济到现代的智能经济&#xff0…

Shell好用的工具: cut

目标 使用cut可以切割提取指定列\字符\字节的数据 介绍 cut 译为“剪切, 切割” , 是一个强大文本处理工具&#xff0c;它可以将文本按列进行划分的文本处理。cut命令逐行读入文本&#xff0c;然后按列划分字段并进行提取、输出等操作。 语法 cut [options] filename opti…

快速学习安全框架 Springsecurity最新版(6.2)--用户授权模块

简介 上一节Springsecurity 用户认证 Springsecurity 拥有强大的认证和授权功能并且非常灵活&#xff0c;,一来说我们都i有以下需求 可以帮助应用程序实现以下两种常见的授权需求&#xff1a; 用户-权限-资源&#xff1a;例如张三的权限是添加用户、查看用户列表&#xff0c;李…

1.1_1 计算机网络的概念、功能、组成和分类

文章目录 1.1_1 计算机网络的概念、功能、组成和分类&#xff08;一&#xff09;计算机网络的概念&#xff08;二&#xff09;计算机网络的功能&#xff08;三&#xff09;计算机网络的组成1.组成部分2.工作方式3.功能组成 &#xff08;四&#xff09;计算机网络的分类 总结 1.…

频段划分学习射频知识的意义

一、射频电路设计与低频电路设计的不同点 随着频率提高&#xff0c;相应电磁波的波长与变得可与分立电路元件的尺寸相比拟时&#xff0c;电阻、电容和电感这些元件的电响应&#xff0c;将偏离他们的理想频率特性。以 WIFI 2.4G 频段为例&#xff0c;当频率为 2437MHz&#xff0…

快速排序、归并排序和堆排序的原理与实现

排序算法是计算机科学中的基本算法之一&#xff0c;用于将一组元素按照一定顺序排列。快速排序、归并排序和堆排序是三种常见的排序算法&#xff0c;各有其特点和适用场景。 快速排序 (Quick Sort) 快速排序是一种经典的分而治之的排序算法。其基本思想是选择一个基准元素&am…

Chat With RTX 安装、使用问题记录

1.安装包运行检测环境失败 安装适合的的CUDA&#xff1a;https://developer.nvidia.com/cuda-downloads?target_osWindows&target_archx86_64&target_version11 2.安装Chat With RTX 和 模型 Mistral 7B 失败 科学上网&#xff0c;可以单独装Chat With RTX 先&…