如何在使用Vite构建时获取项目的总打包体积？

方法1：用Rollup统计插件（推荐） #

Vite基于Rollup生态，直接用rollup-plugin-summary插件就能在打包完成后自动输出总体积，还能显示gzip压缩后的大小：

1. 安装插件：

npm install rollup-plugin-summary --save-dev

2. 在vite.config.js中配置插件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import summary from 'rollup-plugin-summary'

export default defineConfig({
  plugins: [react(), summary()],
})

重新执行npm run build，打包结束后就能看到类似这样的统计结果：

Total bundle size: 123.45 KB (gzipped: 45.67 KB)

方法2：手动写Node脚本统计dist目录总大小 #

如果不想额外安装插件，写个简单的Node脚本就能统计dist目录的总文件大小：

1. 在项目根目录创建calculate-size.js文件：

const fs = require('fs');
const path = require('path');

function getFolderTotalSize(dir) {
  let total = 0;
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    total += stats.isDirectory() ? getFolderTotalSize(fullPath) : stats.size;
  }
  return total;
}

const distPath = path.join(__dirname, 'dist');
const totalBytes = getFolderTotalSize(distPath);
const totalKB = (totalBytes / 1024).toFixed(2);
const totalMB = (totalBytes / (1024 * 1024)).toFixed(2);

console.log(`Dist目录总大小：${totalBytes} Bytes / ${totalKB} KB / ${totalMB} MB`);

2. 执行完npm run build后，运行脚本：

node calculate-size.js

就能得到dist目录的总文件体积。

方法3：用Shell/PowerShell命令直接统计（无需额外配置） #

Linux/Mac系统 #

打包完成后，直接在终端执行：

du -sh dist/

会直接输出dist目录的总大小，例如120K dist/。

Windows PowerShell #

执行以下命令：

Get-ChildItem dist -Recurse | Measure-Object -Property Length -Sum

输出结果中的Sum字段即为总字节数，自行换算成KB/MB即可。

内容的提问来源于stack exchange，提问作者Patrick Kenny