【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.mzph.cn/news/171681.shtml

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

相关文章

【C++】多线程(一):std::thread的使用

这篇文章应我朋友的邀请,写一篇文章介绍下C多线程。 编译环境准备 首先确定你的编译器支持std的thread,如果不支持,就会出现诸如“thread找不到”的问题。 以下假设你使用 gnu gcc 编译器,因为 MSVC 的我也不太熟悉。 linux …

Effective Modern C++(1.顶层const与底层const)

1.顶层const与底层const的定义 const修饰的变量不可以改变,那么他就是顶层const,如: const int a 10; 那么,对于 const int *const p new int(10); 第二个const就是顶层const,因为他修饰的是p;第一个…

学习.NET验证模块FluentValidation的基本用法(续3:ASP.NET Core中的调用方式)

FluentValidation模块支持在ASP.NET Core项目中进行手工或自动验证,主要验证方式包括以下三种:   1)手工注册验证类,并在控制器或其它模块中调用验证;   2)基于ASP.NET验证管道(validation …

Visual Studio 中文注释乱码解决方案

在公司多人开发项目中经常遇到拉到最新代码,发现中文注释都是乱码,很是emjoy..... 这是由于编码格式不匹配造成的,如果你的注释是 UTF-8 编码,而文件编码是 GBK 或者其他编码,那么就会出现乱码现象。一般的解决办法是…

打包SpringBoot 项目为本地应用

使用工具:exe4j、Inno Setup Compiler 步骤: 1,将dll包放入项目根路径下; 2,idea 使用Maven打jar包; 3,使用exe4j 工具进行打包; 打开工具首页不动(直接 next&#xff…

leetcode_828_统计子串中的唯一字符

题意:所有子串中单个字符出现的次数和 问题转化:对于串中的每个字符,只包含其一次的所有子串的个数和 关于求只包含某位置字符一次的子串个数 class Solution { public:int uniqueLetterString(string s) {/* ...A...A...A...*/int n s.size…

第二十二章 解读pycocotools的API,目标检测mAP的计算COCO的评价指标(工具)

Pycocotools介绍 为使用户更好地使用 COCO数据集, COCO 提供了各种 API。COCO是一个大型的图像数据集,用于目标检测、分割、人的关键点检测、素材分割和标题生成。这个包提供了Matlab、Python和luaapi,这些api有助于在COCO中加载、解析和可视化注释。 …

【Skynet 入门实战练习】实现网关服务 | 用户代理 | RPC 协议 | 客户端

文章目录 前言网关服务RPC 协议看门狗服务代理服务客户端逻辑梳理 前言 上两章学习了如何搭建一个项目,简单实现了几个基础模块。本章节会实现基本的客户端与服务端的通信,包括网关(gate)、看门狗(watchdog&#xff0…

不适合当老师怎么转岗

作为一名老师,你需要耐心、热情、知识储备丰富,还要有一定的演讲技巧。但有时候,即使具备了这些条件,你仍然可能觉得自己的个性或能力并不适合这个职业。那么,该如何转岗呢?别担心,我们为你提供…

玉渊谭天对电影色彩分析的“蚊香图”复现-python

视频教程链接:https://www.bilibili.com/video/BV1Lu4y1t7FG/ 最终的实现效果如下: 前几天刷抖音刷到了玉渊谭天对于电影抽取画面制作“蚊香图”,相关视频片段如下。 这种制作”蚊香图“的特效当时有点触动到到我,根据色彩来分…

深度学习技巧应用30-深度学习中的GPU的基本架构原理与应用技巧

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用30-深度学习中的GPU的基本架构原理与应用技巧,GPU是一种专门用于处理大量并行操作的硬件设备,它的架构设计主要是为了图形渲染。然而,由于其并行处理能力,现在广泛应用于深度学习、科学计算等领域。主要的GPU制造商…

autojs-练手-简单的视频号点赞(初阶版)

注释很详细,直接上代码(简单的练手实践,仅供参考) //设置点赞次数 var num50; //等待权限授予 auto.waitFor(); //进入点赞流程 while(num!0) {//先向下滑一个视频scrollDown();//使用auto.js找到点赞控件的id(每个人不…

《软件方法》2023版第1章:1.1 利润=需求-设计,1.2 ABCD工作流

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 第1章 建模和UML 牵着你走进傍晚的风里,看见万家灯火下面平凡的秘密。 《情歌唱晚》;词:黄群,曲:黄群,唱&#…

复数的几何意义

1、复平面,复数的其它表示法 (1)几何表示法 直角平面坐标: 复平面 实轴,虚轴 (2)向量表示法 向量 模: 复数加减法可用向量的三角形法则或者平行四边形法则 (3)结论 (两边之和大于第三边) ((两边之差大于第三边)) *辐角&am…

【Web】/proc利用相关例题wp

先贴一篇文章一起学习一下 [CTF]proc目录的应用 - CodeAntenna ①[HDCTF 2023]YamiYami 点击Read somethings直接跳转到了百度 从url中发现存在任意文件读取,因为不知道flag在哪,所以考虑读环境变量 payload: ?urlfile:///proc/1/environ 拿到fla…

【Spring源码】Spring Event事件

目录 1、前言 2、什么是Spring Event? 3、基本使用 3.1、定义事件 3.2、发布事件 3.3、监听事件 3.3.1、继承ApplicationListener 3.3.2、使用EventListener注解 4、Spring Event是同步还是异步? 4.1、源码实现 4.2、如何实现异步 4.2.1、使用…

Redis与Mysql的数据强一致性方案

目的 Redis和Msql来保持数据同步,并且强一致,以此来提高对应接口的响应速度,刚开始考虑是用mybatis的二级缓存,发现坑不少,于是决定自己搞 要关注的问题点 操作数据必须是唯一索引 如果更新数据不是唯一索引&#…

5种主流API网关技术选型,yyds!

API网关是微服务项目的重要组成部分,今天来聊聊API网关的技术选型,有理论,有实战。 不 BB,上文章目录: 1 API网关基础 1.1 什么是API网关 API网关是一个服务器,是系统的唯一入口。 从面向对象设计的角度…

docker介绍、部署与常用命令

一、docker 介绍 1、容器(Container): (1) 概念: 容器是一种用于运行和部署应用程序的技术。它将应用程序及其所有依赖项(例如代码、运行时、系统工具、系统库等)打包在一个独立的、可移植的运行环境中&…

Facebook的特点优势

Facebook作为全球最大的社交媒体平台之一,同时也是最受欢迎的社交网站之一,Facebook具有许多独特的特点和优势。本文小编将说一些关于Facebook的特点及优势。 1、全球化 Facebook拥有数十亿的全球用户,覆盖了几乎所有国家和地区。这使得人们…