Vite打包分析工具

核心提示

掌握Vite项目打包体积分析技巧能有效优化应用性能，文中推荐的vite-bundle-visualizer工具支持零配置一键生成可视化报告。

问题背景

在开发Vite项目时，开发者经常需要分析构建产物体积以优化应用性能。虽然Rollup生态中有rollup-plugin-analyzer这样的工具，但它在Vite环境中常出现兼容性问题，无法直接使用。

推荐解决方案

1. vite-bundle-visualizer（首选）

目前最主流的Vite专用打包分析工具（NPM周下载量15万+），底层基于rollup-plugin-visualizer，支持多种视图模式且无需修改配置文件。

功能亮点

• 零配置开箱即用
• 支持treemap/sunburst/network多种可视化模式
• 自动生成HTML报告并打开浏览器
• 显示gzip/brotli压缩大小

使用步骤

# 在项目根目录执行
npx vite-bundle-visualizer

# 指定配置文件（可选）
npx vite-bundle-visualizer -c your.config.js

# 生成太阳模型视图
npx vite-bundle-visualizer -t sunburst

命令执行后将在浏览器自动打开生成的stats.html报告：

 TreeMap视图（默认模式）

常用参数

参数	说明
-t <模板>	指定视图类型（treemap/sunburst/network/raw-data）
-o <路径>	自定义报告输出路径
--open false	禁用自动打开报告

2. rollup-plugin-visualizer（原生集成）

如果需要在Vite配置文件中灵活控制生成报告，可直接安装原始插件。

npm install rollup-plugin-visualizer --save-dev

在vite.config.js中配置：

import { defineConfig } from 'vite'
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    // 其他插件...
    visualizer({
      template: "treemap",  // 视图类型: treemap/sunburst
      open: true,           // 构建后自动打开
      gzipSize: true,       // 显示gzip压缩大小
      brotliSize: true,     // 显示brotli压缩大小
      filename: "bundle-analysis.html" // 输出文件名
    })
  ]
})

类型提示

Visualizer不是Vite的官方插件，使用时需增加类型断言：

// 在TypeScript项目中
visualizer() as Plugin

3. Sonda（新一代工具）

2024年推出的现代化分析平台，提供多维度性能诊断：

• 组件级粒度分析
• 代码变化量对比
• 首屏加载模拟
• Lighthouse合规报告

访问官网查看完整功能：https://sonda.dev/

不同工具功能对比

功能	vite-bundle-visualizer	rollup-plugin-visualizer	Sonda
零配置使用	✅	❌	⚠️（需注册）
多种视图模式	✅	✅	✅
体积变化趋势	❌	❌	✅
首屏加载模拟	❌	❌	✅
部署要求	本地	本地	云服务

如何选择适合的工具

1. 快速分析场景：直接使用 npx vite-bundle-visualizer
2. 定制化需求：在Vite配置中集成rollup-plugin-visualizer
3. 企业级监控：结合CI/CD使用Sonda获取长期趋势报告

专家建议

开发阶段建议保留treemap视图的HTML报告文件，将其加入.gitignore避免意外提交：

# .gitignore
stats.html
bundle-analysis.html

通过合理使用这些工具，可以精准定位体积异常模块，针对性优化提升应用加载速度。建议在每次发布前运行分析，确保包体积在可控范围。