【React】打包体积分析 source-map-explorer

通过分析打包体积,才能知道项目中的哪部分内容体积过大,方便知道哪些包需要进一步优化。

使用步骤

  1. 安装分析打包体积的包:npm i source-map-explorer
  2. 在 package.json 中的 scripts 标签中,添加分析打包体积的命令
  3. 对项目打包:npm run build(如果已经打过包,可省略这一步)
  4. 运行分析命令:npm run analyze
  5. 通过浏览器打开的页面,分析图表中的包体积
"scripts": {"analyze": "source-map-explorer 'build/static/js/*.js'",
}

27.png

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

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

相关文章

cocos游戏引擎制作的滚动框地图防止误点操作的简单方法

本篇文章主要讲解,使用cocos creator 来解决在我们日常滚动框开发中,滚动和触摸存在冲突的情况,导致的误触行为的解决办法。 日期:2023年11月25日 具体事项 说明:在我们滚动滚动框时,会出现误点的情况&…

flink源码分析之功能组件(二)-kubeclient

简介 本系列是flink源码分析的第二个系列,上一个《flink源码分析之集群与资源》分析集群与资源,本系列分析功能组件,kubeclient,rpc,心跳,高可用,slotpool,rest,metrics,future。其中kubeclient上一个系列介绍过,为了系列完整性,这里“copy”一下。 kubeclient组件…

Vue3框架中让table合计居中对齐

第一步&#xff1a;给它加一个类名 center-table 如下&#xff1a; <el-table:data"datas.shows"max-height"600px"show-summarystripeborderstyle"width: 100%":header-cell-style"{ textAlign: center }":cell-style"{ text…

别再被面试官问倒了!快速失败与安全失败的区别详解

大家好&#xff0c;我是小米&#xff0c;一个热爱技术分享的程序员大哥哥。今天&#xff0c;我们来聊一个在Java面试中经常会被问到的问题——"快速失败"&#xff08;fail-fast&#xff09;和"安全失败"&#xff08;fail-safe&#xff09;的区别。这两个概…

最大功率传输定理

最大功率传输定理 U为电源电压 r 为电源内阻 R 为负载 计算如下&#xff1a; 可知&#xff0c;当R r 时&#xff0c;负载上的功率最大 为&#xff1a; 从下面的表中也可以看出&#xff0c;当电源内阻r 等于负载负载电阻R时&#xff0c;负载所获得的功率最大。但效率不是最大…

P11 如何写一个C++类 Log日志基础

01 前言 到目前为止&#xff0c;我们学了类 class&#xff0c;本期我们要尝试着从头开始写一个类。 本期不会讲的太深。我们不会写非常复杂的类&#xff0c;我们要会完成一个基本的 log 类 02 为什么使用 log 首先我们先分析一下我们的需求&#xff0c;这个 log 类到底是什么…

活久见!100元起拍的手机号,最终以2614万元成交?评论区炸了!

近日&#xff0c;一起刑事案件案犯的手机号码被江苏省镇江经济开发区人民法院公开拍卖&#xff0c;起拍价仅为100元&#xff0c;然而最终以26145892元的天价被竞买者买下。这个手机号码是18611999999&#xff0c;据网络竞价成功确认书显示&#xff0c;竞买者是一位姓肖的自然人…

pop链反序列化 [MRCTF2020]Ezpop1

打开题目 网站源码为 Welcome to index.php <?php //flag is in flag.php //WTF IS THIS? //Learn From https://ctf.ieki.xyz/library/php.html#%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E9%AD%94%E6%9C%AF%E6%96%B9%E6%B3%95 //And Crack It! class Modifier {protected …

软件设计师:计算机组成与体系结构之计算机基础知识

计算机基础知识 数据的表示 码制及进制转换 原码&#xff1a;将数值转成二进制反码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;除了符号位其他位取反补码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;在补码的基础上加1移码&#xff1a;补码…

Node.js下载安装及配置镜像源

一、进入官网地址下载安装包 https://nodejs.org/dist 选择对应你系统的Node.js版本 这里我选择的是Windows系统、64位 二、安装程序 &#xff08;1&#xff09;下载完成后&#xff0c;双击安装包&#xff0c;开始安装Node.js (2)直接点【Next】按钮&#xff0c;此处可根据…

CUDA编程二、C++和cuda混合编程的一些基础知识点

目录 一、C运行过程 1、C编译过程 2、代码运行示例 单文件 多文件 a、编译所有cpp文件&#xff0c;但是不链接 b、链接所有的.o文件 c、运行程序 CMake编译 代码 使用方法 编译过程 代码运行 二、C和cuda混合编程 cuda 单文件 cuda和C多文件 手动分步编译 C…

【学习草稿】pid控制基础实现--往水桶注水

pid 1&#xff09;非常通俗易懂的PID控制&#xff08;1&#xff09;https://zhuanlan.zhihu.com/p/37515841 球场上运动至指定地点&#xff08;比例控制&#xff09;&#xff1a;有图【很直观的帮助理解】&有文字分析 2&#xff09;初识PID-搞懂PID概念 https://zhuanlan.…