【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 = 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

原文地址：https://blog.csdn.net/weixin_51083890/article/details/142288150

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！