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

今天算是入职了一家外包吧吧，行情不好，先找个过渡。
中秋节第一天，先卷一下，我优化了下一个项目模版，因为我的项目需要我从那个模版上复制出一个新的项目，那本着不折腾就难受的心态，我还是进行了优化，优化完成后我就想我为什么不能在编译后显示下我打出来的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 = 0while (totalSize >= 1024 && unitIndex < units.length - 1) {totalSize /= 1024unitIndex++}// 输出结果，亮色表示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