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

一、安装依赖分析工具

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.hqwc.cn/news/487246.html

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

相关文章

Linux环境安装jira

jira 是项目与事务跟踪工具&#xff0c;被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。 jira 软件安装包直接搜官网&#xff0c;然后可以选择免费的来下载&#xff1a; 安装 jira 之前&#xff0c;需要 Java 和 mysql 环境的…

大模型+影像:智能手机“上春山”

这个春节假期&#xff0c;一首《上春山》火了。吃瓜群众热热闹闹学了一个假期的“春山学”&#xff0c;了解了抢占C位的各种技巧。 假期过去&#xff0c;开工大吉&#xff0c;手机行业开始抢占今年的C位。那么问题来了&#xff0c;今年智能手机最大的机会点在哪里&#xff1f;答…

主流开发语言和开发环境:探索编程世界的基础

在当今这个快速发展的技术时代&#xff0c;软件开发已经成为推动创新的重要力量。无论是构建下一代应用、开发先进的算法还是创建复杂的系统&#xff0c;选择合适的编程语言和开发环境都是至关重要的。在本文中&#xff0c;我们将探讨当前流行的几种主流开发语言以及它们常用的…

SparkSQL学习03-数据读取与存储

文章目录 1 数据的加载1.1 方式一&#xff1a;spark.read.format1.1.1读取json数据1.1.2 读取jdbc数据 1.2 方式二&#xff1a;spark.read.xxx1.2.1 读取json数据1.2.2 读取csv数据1.2.3 读取txt数据1.2.4 读取parquet数据1.2.5 读取orc数据1.2.6 读取jdbc数据 2 数据的保存2.1…

计算机网络面经-HTTP的8种请求方式

简单介绍 HTTP是超文本传输协议&#xff0c;其定义了客户端与服务器端之间文本传输的规范。HTTP默认使用80端口&#xff0c;这个端口指的是服务端的端口&#xff0c;而客户端使用的端口是动态分配的。当我们没有指定端口访问时&#xff0c;浏览器会默认帮我们添加80端口。我们…

29. 【Linux教程】Linux 用户介绍

本小节介绍 Linux 用户的基础知识&#xff0c;了解 Linux 系统中有哪些用户&#xff0c;如何查看当前 Linux 系统中有哪些用户&#xff0c;每一个 Linux 用户的权限取决于这些账号登录时获取到的权限。 1. Linux 用户类型 Linux 系统是一个多用户多任务的操作系统&#xff0c;…

Lua速成(2)

一、流程控制 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码&#xff0c;在条件为 false 时执行其他指定代码。 控制结构的条件表达式结果可以是任何值&#xff0c;Lua认为false和nil为假&#xff0c;true和非nil为真。 …

python 基础知识点(蓝桥杯python科目个人复习计划49)

今日复习内容&#xff1a;做复习题 例题1&#xff1a;希尔排序 题目描述&#xff1a; 希尔排序是直接插入排序算法的一种更高效的改进版本&#xff0c;但它是非稳定排序算法。希尔排序是基于插入排序的以下两点性质而提出的改进方法之一&#xff1a; 1.插入排序在对几乎已经…

CVE-2023-44313 Apache ServiceComb Service-Center SSRF 漏洞研究

本次项目基于go语言&#xff08;本人不精通&#xff09;&#xff0c;虽不是java web框架了 &#xff0c;但搭建web服务的框架一些思想理念却是通用的&#xff0c;我们由此可以得到一些蛛丝马迹....... 目录 漏洞简介 漏洞分析 漏洞复现 漏洞简介 Apache ServiceComb Servi…

10:部署Dashboard|部署Prometheus|HPA集群

部署Dashboard&#xff5c;部署Prometheus&#xff5c;HPA集群 Dashboard部署Dashboard上传镜像到私有仓库安装服务发布服务创建管理用户查看登录的Token信息 Prometheus步骤一&#xff1a;导入所有后续需要的镜像到私有镜像仓库&#xff08;在master主机操作操作&#xff09;步…

BERT学习笔记

论文&#xff1a;《BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding》&#xff0c;2019 代码&#xff1a;[tensorflow]&#xff0c;[pytorch] 来源&#xff1a;李沐精度BERT 0、摘要 与之前模型的区别&#xff1a; GPT考虑的是一个单向…

Sora技术详解及影响分析!

Datawhale干货 作者&#xff1a;李孝杰&#xff0c;清华大学&#xff0c;Datawhale成员 从openai sora[1]的技术报告首段可以看出sora的野心远远不止视频生成&#xff0c;他们的目标是通过视频数据来学习一个世界模型或者世界模拟器&#xff0c;这才是真正令人兴奋和激动的部分…