总览

想在 Vite + Vue3 打包后看到类似 Webpack Bundle Analyzer 的交互式“依赖体积分布图”，最简单稳妥的方法是接入 rollup-plugin-visualizer。本文给出最小改动方案：按需启用分析模式、构建、自动打开 stats.html。

---

实现思路

• 使用 Rollup 可视化插件（Vite 打包底层是 Rollup）。
• 仅在“分析模式”挂载插件，避免影响日常构建速度。
• 构建完成自动生成并打开 stats.html（Treemap/Sunburst 可选）。
• 可选：开启 sourcemap 便于二次分析。

---

分步操作

1）安装依赖

# 任选包管理器
pnpm add -D rollup-plugin-visualizer
# 或
npm i -D rollup-plugin-visualizer
# 或
yarn add -D rollup-plugin-visualizer

2）修改 vite.config.ts（只给需要改的片段）

说明：以下片段为增量修改，请在你的 vite.config.ts 里按位置插入即可。

// ① 顶部新增一行：导入可视化插件
import { visualizer } from "rollup-plugin-visualizer";

// ② 在 defineConfig 回调里按需启用（若你当前不是回调形式，可改为回调：defineConfig(({ mode }) => ({ ... }))）
const enableAnalyze = process.env.ANALYZE === "true" || mode === "analyze";

// 复杂逻辑：仅在分析模式下挂载插件，避免常规构建受影响
enableAnalyze &&
  plugins.push(
    visualizer({
      // 复杂逻辑：输出 treemap 到项目根目录，并在构建结束自动打开
      filename: "stats.html",
      template: "treemap", // 可选：'treemap' | 'sunburst' | 'network'
      open: true,
      gzipSize: true,
      brotliSize: true,
    })
  );

// ③（可选）为了配合二次分析或排查问题，开启源码映射
build: {
  // 复杂逻辑：仅在分析模式下开启 sourcemap（若你已有 build 配置，请合并到其中）
  sourcemap: enableAnalyze;
}

小贴士：若你的 plugins 是直接字面量数组，改成先声明 const plugins = [vue(/*...*/)] 再 .push(...)，最后 return { plugins }。不想改结构也行：plugins: [vue(), enableAnalyze && visualizer({...})].filter(Boolean)。

3）新增构建脚本（二选一）

方案 A（推荐，跨平台零依赖）：用 --mode analyze 触发

{
  "scripts": {
    "build": "vite build",
    "build:analyze": "vite build --mode analyze"
  }
}

方案 B：用环境变量触发（类 Unix 系统方便）

{
  "scripts": {
    "build": "vite build",
    // 复杂逻辑：通过环境变量开启分析模式；Windows 可用 cross-env 做兼容
    "build:analyze": "ANALYZE=true vite build"
  }
}

---

使用方法

# 触发分析构建（使用你选择的方案）
pnpm run build:analyze

# 构建完成后会自动打开 stats.html
# 若未自动打开，可手动在项目根目录双击/用浏览器打开 stats.html

---

进阶玩法（可选）

A. 自定义输出位置/图表类型

// 复杂逻辑：将报告输出到 dist 目录下并改为 sunburst 风格
visualizer({
  filename: "dist/bundle-report.html",
  template: "sunburst",
  open: true,
});

B. 快速“拆包”以便观察效果

仅示例，按你实际依赖调整：

// 复杂逻辑：演示常见手动分包，便于在图里更清晰地区分
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vue: ['vue', 'vue-router', 'pinia'],
        // 如果你用到 Ant Design Vue / ECharts / AntV 等，可分别拆
        // antdv: ['ant-design-vue'],
        // echarts: ['echarts'],
        // antv: ['@antv/g2', '@antv/g2plot'],
      }
    }
  }
}

C. 二次分析（Source Map）

# 可选：安装 source-map-explorer 做“按文件”体积分析
pnpm add -D source-map-explorer
# 构建（确保 sourcemap 已开启）
pnpm run build:analyze
# 生成 HTML 报告（路径按你的 dist 实际文件调整）
npx source-map-explorer "dist/assets/*.js" --html dist/sme.html

---

常见问题

• stats.html 是空白/打不开？ 多半是构建被缓存或浏览器拦截了本地文件。先清理 dist 再构建；或换个浏览器打开，必要时关闭浏览器的本地文件限制。

• 报告没自动打开？ CI/无头环境不会自动打开。把 open: false，直接到输出目录找报告 HTML 即可。

• Windows 下 ANALYZE=true 不生效？ 用方案 A（--mode analyze），或安装 cross-env： cross-env ANALYZE=true vite build。

• 体积异常大但定位不到模块？ 开启 sourcemap 后再看 stats.html；若仍不清晰，配合 source-map-explorer 交叉验证。

---

小结

• 装一个 rollup-plugin-visualizer，按需启用分析模式，构建即得可交互分析图。
• 报告默认 stats.html，Treemap/Sunburst 随选。
• 需要更深入排查时，打开 sourcemap + source-map-explorer 双管齐下。