【VUE3】Vite编译的打包输出dist包大小的小工具

news2024/9/20 17:55:55

今天算是入职了一家外包吧吧,行情不好,先找个过渡。
中秋节第一天,先卷一下,我优化了下一个项目模版,因为我的项目需要我从那个模版上复制出一个新的项目,那本着不折腾就难受的心态,我还是进行了优化,优化完成后我就想我为什么不能在编译后显示下我打出来的dist包的大小呢,所以就有了下方的小函数
顺便说下黑悟空俺四天就通关了!!

// size-report-plugin.ts
import { Plugin } from 'vite'

export const sizeReportPlugin = (): Plugin => {
  return {
    name: 'size-report',
    apply: 'build', // 仅在构建时应用此插件
    async closeBundle() {
      const fs = await import('fs')
      const path = await import('path')
	// 这边一定要注意,我的文件夹叫dist,然后目录路径和各位的项目可能有出入,请修改为正确的路径
      const distPath = path.resolve(__dirname, '../../dist')
      let totalSize = 0

      // 递归计算文件大小
      const calculateSize = (dir: string) => {
        const files = fs.readdirSync(dir)
        for (const file of files) {
          const filePath = path.join(dir, file)
          const stat = fs.statSync(filePath)
          if (stat.isDirectory()) {
            calculateSize(filePath) // 如果是目录,则递归计算
          } else {
            totalSize += stat.size // 累加文件大小
          }
        }
      }

      calculateSize(distPath)

      // 转换为可读的格式(例如:KB,MB)
      const units = ['B', 'KB', 'MB', 'GB', 'TB']
      let unitIndex = 0
      while (totalSize >= 1024 && unitIndex < units.length - 1) {
        totalSize /= 1024
        unitIndex++
      }

      // 输出结果,亮色表示
      console.log(
        `\x1B[33m\x1B[4m打出来的包大小: ${totalSize.toFixed(2)}${units[unitIndex]}\x1B[0m`
      )
    }
  }
}

然后引用到vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import sizeReportPlugin from './size-report-plugin';

export default defineConfig({
  plugins: [sizeReportPlugin()],
});

确保在tsconfig.json中包含了必要的Node.js模块类型定义:

// tsconfig.json
{
  "compilerOptions": {
    // ... 其他选项
    "types": ["node"],
    "esModuleInterop": true
  }
}

记得在运行之前安装Node.js的类型定义,如果尚未安装,可以使用以下命令:

npm install --save-dev @types/node

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

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

相关文章

相亲交友系统 现代爱情的导航仪

在这个数字化的时代&#xff0c;人们的生活方式发生了翻天覆地的变化&#xff0c;其中最显著的变化之一便是交友方式的转变。编辑h17711347205随着社会节奏的加快&#xff0c;越来越多的人选择通过相亲交友系统来寻找人生伴侣。相亲交友系统不仅简化了传统的交友流程&#xff0…

pig4cloud自定义SecurityFilterChain、Filter

1. 环境 SpringBoot版本&#xff1a;2.7.16 SpringSecurity版本&#xff1a;5.7.11 pig4cloud版本&#xff1a;3.7.1-JDK8 2. 概述 pig4cloud也没有自定义SecurityFilterChain的实现&#xff0c;还是基于SpringSecurity去实现的。但是pig4cloud使用的SpringSecurity的5.7.…

鸿蒙手势交互(四:多层手势)

四、多层手势 指父子组件嵌套时&#xff0c;父子组件均绑定了手势或事件。有两种&#xff0c;一种默认多层级手势事件&#xff0c;一种自定义多层级手势事件。 默认多层级手势事件&#xff1a;需要分清两个概念&#xff0c;触摸事件&#xff0c;手势与事件 触摸事件&#xf…

MySQL数据库:掌握备份与恢复的艺术,确保数据安全无忧(二)

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 ​编辑 正…

springbootKPL比赛网上售票系统

基于springbootvue实现的KPL比赛网上售票系统 &#xff08;源码L文ppt&#xff09;4-068 4.2 系统结构设计 架构图是系统的体系结构&#xff0c;体系结构是体系结构体系的重要组成部分。KPL比赛网上售票系统的总体结构设计如图4-2所示。 图4-2 系统总体架构图 4.3数据…

【Java面向对象二】static(二)修饰成员方法的应用场景

文章目录 前言一、static修饰成员方法的应用场景二、使用例子三、工具类没有创建对象的需求&#xff0c;建议将工具类的构造方法进行私有总结 前言 记录学习过程中的工具类的使用。 一、static修饰成员方法的应用场景 1、类方法的常见应用场景 类方法最常见的应用场景是做工…

Java设计模式——工厂方法模式(完整详解,附有代码+案例)

文章目录 5.3 工厂方法模式5.3.1概述5.3.2 结构5.3.3 实现 5.3 工厂方法模式 针对5.2.3中的缺点&#xff0c;使用工厂方法模式就可以完美的解决&#xff0c;完全遵循开闭原则。 5.3.1概述 工厂方法模式&#xff1a;定义一个创建对象的接口&#xff08;这里的接口指的是工厂&…

01_WebRtc_一对一视频通话

文章目录 通话网页的设计客户端实现Web的API 服务端实现 2024-9-20 很久没有写博客啦&#xff0c;回顾总结这段时间的成果&#xff0c; 写下博客放松下&#xff08;开始偷懒啦&#xff09;主要内容&#xff1a;实现网页&#xff08;html&#xff09;打开摄像头并显示到页面需要…

泳池软管检测系统源码分享

泳池软管检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

C++: 使用红黑树模拟实现STL中的map和set

目录 1. 红黑树的迭代器和-- 2. 改造红黑树3. set的模拟实现4. map的模拟实现5. RBTree的改造代码 博客主页 : 酷酷学 正文开始 1. 红黑树的迭代器 迭代器的好处是可以方便遍历&#xff0c;是数据结构的底层实现与用户透明 打开C的源码我们可以发现, 其实源码中的底层大概如…

数据结构应试-树和二叉树

1. 2. 结点的度&#xff1a;结点拥有的子树数量称为结点的度 树的度&#xff1a;树内各结点度的最大值&#xff0c;即上图 D 结点的度就是此树的度 叶子&#xff1a;度为 0 的节点称为叶子或终端节点 结点的层次和树的深度 森林&#xff1a;m棵互不相交的树的集合。 3. 为啥…

司南 OpenCompass 九月大语言模型评测榜单启动召集,欢迎新合作厂商申请评测

主要概览 司南 OpenCompass 大语言模型官方自建榜单&#xff08;9 月榜&#xff09;评测拟定于 10 月上旬发布&#xff0c;现诚挚邀请新加入的合作方参与评测。本次评测围绕强化能力维度&#xff0c;全面覆盖语言、推理、知识、代码、数学、指令跟随、智能体等七大关键领域&am…

layui时间选择器选择周 日月季度年

<!-- layui框架样式 --><link type"text/css" href"/static/plugins/layui/css/layui.css" rel"stylesheet" /><!-- layui框架js --><script type"text/javascript" src"/static/plugins/layui/layui.js&qu…

【LeetCode】每日一题 2024_9_20 统计特殊整数(数位 DP)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;统计特殊整数 代码与解题思路 func countSpecialNumbers(n int) int { // 今天的题目是数位 DP&#xff0c;我不会做&#xff0c;所以现场学习了一下灵神的数位 DP 模版s : strconv.Itoa…

11个推特大V发文推广的数据分析技巧

社交媒体已经成为了现代社会中不可或缺的一部分&#xff0c;而推特作为其中的重要一员&#xff0c;吸引了许多用户。对于那些成千上万的粉丝拥有者&#xff08;也被称为“大V”&#xff09;&#xff0c;他们能够有效地利用推特平台&#xff0c;推广自己的观点和产品。我们将介绍…

让医院更智慧,让决策更容易

依托数字孪生技术&#xff0c;赋能智慧医院&#xff0c;对使用者和决策者带来了众多的优势。数字孪生技术是将物理实体与数字模型相结合&#xff0c;实现实时监测、仿真预测和智能决策的一种先进技术。在智慧医院中应用数字孪生技术&#xff0c;不仅可以提升医疗服务的质量和效…

阿里云容器服务Kubernetes部署新服务

这里部署的是前端项目 1.登录控制台-选择集群 2.选择无状态-命名空间-使用镜像创建 3.填写相关信息 应用基本信息&#xff1a; 容器配置&#xff1a; 高级配置&#xff1a; 创建成功后就可以通过30006端口访问项目了

XML:DOM4j解析XML

XML简介&#xff1a; 什么是XML&#xff1a;XML 是独立于软件和硬件的信息传输工具。 XML 的设计宗旨是传输数据&#xff0c;而不是显示数据。XML 标签没有被预定义。您需要自行定义标签。XML不会做任何事情&#xff0c;XML被设计用来结构化、存储以及传输信息。 XML可以发明…

再次理解UDP协议

一、再谈端口号 在 TCP / IP 协议中&#xff0c;用 "源 IP", "源端口号", "目的 IP", "目的端口号", "协议号" 这样一个五元组来标识一个通信(可以通过 netstat -n 查看) 我们需要端口号到进程的唯一性&#xff0c;所以一个…

工业控制系统等保2.0定级备案经验分享

工业控制系统和传统IT系统有所差异&#xff0c;须单独划分定级对象 工业控制系统定级时将现场采集/执行、现场控制和过程控制等要素应作为一个整体对象定级&#xff0c;各要素不单独定级&#xff1b;生产管理要素可单独定级。对于大型工业控制系统&#xff0c;可以根据系统功能…