React Vite 构建工具如何查看代码占用体积

news2024/10/7 4:25:13

 首先安装 Vite 中的 rollup-plugin-visualizer 插件

cnpm install rollup-plugin-visualizer

  接着在你的 vite.config.ts 中引入并且使用到 plugins 中

import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true }),
    CompressionPlugin(), // 代码压缩
    ViteLegacy({
      targets: ["defaults", "not IE 11"],
      polyfills: true,
      modernPolyfills: true,
      renderLegacyChunks: true,
    }),
  ],

接着进行打包,生成 dist 文件之后会自动为你打开页面进入查看,如下

 

 

时小记,终有成。

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

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

相关文章

JWT令牌实现登陆校验

一、JWT出现的背景 jwt令牌出现的背景,比如我们通过一个路由访问网站的时候,有些游客在知道url的情况下会跳过用户登录直接访问其他网页,这样不仅在逻辑上说不通(我没登陆咋就能使用其他功能?)还会造成信息…

第三天 Kubernetes进阶实践

第三天 Kubernetes进阶实践 本章介绍Kubernetes的进阶内容,包含Kubernetes集群调度、CNI插件、认证授权安全体系、分布式存储的对接、Helm的使用等,让学员可以更加深入的学习Kubernetes的核心内容。 ETCD数据的访问 kube-scheduler调度策略实践 预选与…

SSD LDPC纠错算法的重要性

固态硬盘(Solid State Drives, SSD)作为计算机行业中最具革命性的技术之一,凭借其更快的读写速度、增强的耐用性和能效,已经成为大多数用户的首选存储方案。然而,如同任何其他技术一样,SSD也面临自身的挑战…

SpringBoot约定大于配置

什么是约定大于配置 "约定大于配置"(Convention Over Configuration)是一种理念,旨在通过默认约定和规则来减少开发人员需要做的配置工作。在Spring Boot框架中,这一原则得到了充分应用,帮助开发者更快地构…

C++之获取Windows系统信息

目录 1. 操作系统版本 2. 获取CPU信息 3. 获取内存信息 4. 获取硬盘信息 5.获取网络接口信息 6.获取计算机名称、用户名 在C中,你可以使用Windows API函数来获取Windows系统的各种信息。以下是一些常见的API函数和示例代码,用于获取Windows系统信息…

⭐每天一道leetcode:35.搜索插入位置(简单;二分速查)

⭐今日份题目 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例1 输入: nums [1,3,5,6], target 5 输出: 2 …

计算机体系结构:VLIW

原文来自知乎 计算机体系结构:VLIW 本文主要介绍计算机体系结构中的VLIW,以供读者能够理解该技术的定义、原理、应用。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:计算机杂记 &#x1f…

8套成熟在用的三级医院信息化系统源码,HIS、LIS、PACS、智慧导诊、线上预约挂号支付系统源码

8套成熟在用的二级医院、三级医院医院管理系统源码,均有自主知识产权,应用案例,系统稳定运行中。可直接上手项目,支持二次开发 ▶ 一、SaaS模式Java语言开发的云HIS系统源码 在公立二甲医院应用三年,融合B/S版电子病历…

[项目设计] 从零实现的高并发内存池(四)

🌈 博客个人主页:Chris在Coding 🎥 本文所属专栏:[高并发内存池] ❤️ 前置学习专栏:[Linux学习] ⏰ 我们仍在旅途 ​ 目录 6.内存回收 6.1 ThreadCache回收内存 6.2 CentralCache回收内存 Rele…

Docker安装+基础命令

一、检测、配置安装环境 (1)查看linux版本,是否符合>centos 7 (2)查看网络是否通畅 (3)安装gcc,gcc-c编译器 (4)安装device-mapper-persistent-data和lvm2…

【LabVIEW FPGA】CIC滤波器

一、CIC滤波器应用概述 在通信数字信号上下变频时,经常会用到对数字信号的升采样和降采样,即通过CIC数字速率器实现变采样率。 二、滤波器IP 首先设置滤波器基本参数(filter specification) 滤波器类型(Filter Type…

2024年阿里云域名优惠口令更新,亲测有效口令大全

2024年阿里云域名优惠口令,com域名续费优惠口令“com批量注册更享优惠”,cn域名续费优惠口令“cn注册多个价格更优”,cn域名注册优惠口令“互联网上的中国标识”,阿里云优惠口令是域名专属的优惠码,可用于域名注册、续…

【图形学中的数学】GAMES001

目录 0 引言1 线性代数基础1.1 向量(Vector)1.2 向量空间(Vector Space)1.3 线性组合1.4 图形学研究的维度1.5 矩阵(Matrix)1.5.1 矩阵单目运算1.5.2 低维变换矩阵 1.6 齐次坐标 🙋‍♂️ 作者&…

使用数据库实现增删改查

#include<myhead.h>//定义添加数据函数int do_add(sqlite3 *ppDb) {//1.准备sql语句,输入要添加的信息int add_numb; //工号char add_name[20]; //姓名char add_sex[10]; //性别double add_score; //工资printf("请输入要添加的工号:")…

leetcode 热题 100_最大子数组和

题解一&#xff1a; 动态规划&#xff1a;这是一道经典的动态规划题。维护一个dp数组&#xff0c;dp[i]表示0~i组成的数组的最大子数组和。当数组长度为1时&#xff0c;最大和连续子数组是它本身&#xff0c;也就是dp[i]nums[i]。当数组长度每增加1时&#xff0c;最大和连续子数…

每日力扣——滑动窗口与前 K 个高频元素

&#x1f525; 个人主页: 黑洞晓威 &#x1f600;你不必等到非常厉害&#xff0c;才敢开始&#xff0c;你需要开始&#xff0c;才会变的非常厉害。 滑动窗口最大值 给定一个数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑…

开展庆2024年“三八”国际妇女节系列纪念活动怎样向媒体投稿?

为了向媒体投稿,庆祝2024年“三八”国际妇女节系列纪念活动,你可以遵循以下步骤: 策划与准备: 确定纪念活动的主题和目标,例如提升女性权益、表彰女性成就、促进性别平等。 策划一系列活动,如研讨会、表彰仪式、展览、讲座等,确保内容丰富多样。 准备相关的背景资料、活动介…

DR模式下LVS负载均衡聚集部署实验

目录 1、实验准备 2、配置负载调度器&#xff08;ens33&#xff1a;192.168.80.9 VIP:192.168.80.188&#xff09; 2.1 配置虚拟ip地址&#xff08;VIP&#xff1a;192.168.80.188&#xff09; 2.2 调整proc响应参数 2.3 设置负载分配策略 3、部署共享存储&#xff08;NF…

Win11桌面出现的这个图标“了解此图片”怎么关闭?

&#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x1f609; 在csdn获奖荣誉: &#x1f3c6;csdn城市之星2名 ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ …

代码随想录刷题笔记-Day29

1. N皇后 51. N 皇后https://leetcode.cn/problems/n-queens/ 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数…