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

news/2025/2/13 22:04:34/

一、安装依赖分析工具

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.ppmy.cn/news/1362283.html

相关文章

【软件设计模式之外观模式】

文章目录 前言一、什么是外观模式&#xff1f;1.定义和原理2.应用场景 二、外观模式的优缺点1.优点2.缺点 三、实际应用案例1.代码实现2.讨论 五、总结 前言 外观模式通过提供一个统一的高级接口&#xff0c;使得访问复杂子系统变得更简单。这种模式的核心在于&#xff0c;它为…

流浪动物救助平台:Java开发的实践与思考

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

github 笔记: fatal: Could not read from remote repository.

git clone 包时出现这两行报错 gitgithub.com: Permission denied (publickey). fatal: Could not read from remote repository.这意味着 SSH 认证失败了&#xff0c;通常是因为本地机器的 SSH 密钥未被 GitHub 账户识别/未正确设置。在终端中使用 ssh -T gitgithub.com 可以…

消息中间件篇之RabbitMQ-消息不丢失

一、生产者确认机制 RabbitMQ提供了publisher confirm机制来避免消息发送到MQ过程中丢失。消息发送到MQ以后&#xff0c;会返回一个结果给发送者&#xff0c;表示消息是否处理成功。 当消息没有到交换机就失败了&#xff0c;就会返回publish-confirm。当消息没有到达MQ时&…

2_怎么看原理图之协议类接口之UART笔记

通信双方先约定通信速率&#xff0c;如波特率115200 一开始时&#xff0c;2440这边维持高电平 1> 开始发送时&#xff0c;由2440将&#xff08;RxD0&#xff09;高电平拉低&#xff0c;并持续一个T的时间&#xff08;为了让PC机可以反应过来&#xff09;&#xff0c;T1/波…

常用软件下载地址

Git&#xff1a; Git - Downloading Package TortoiseGit&#xff1a; download.TortoiseGit.org – Index of /tgit/

ubuntu22 编译 SIBR 3dgs

1.clone 代码 git clone https://github.com/graphdeco-inria/gaussian-splatting.git --recursive 2.基础库文件安装 sudo apt install -y libglew-dev libassimp-dev libboost-all-dev libgtk-3-dev libopencv-dev libglfw3-dev libavdevice-dev libavcodec-dev libeigen3…

代码随想录算法训练营第三天

● 自己看到题目的第一想法 203.移除链表元素 方法一&#xff1a; 思路&#xff1a; 设置虚拟头节点 dummyhead 设置临时指针 cur 遍历 整个链表 循环&#xff1a; 如果 cur !nullptr &&cur->next !nullptr 则 遍历链表 否则结束遍历 如果 cur->next val 则…