在 vite.config.ts 中引入 rollup-plugin-visualizer 插件并配置，打包时自动生成 stats.html 可视化报告，支持 treemap 等多种视图，直观展示各模块体积占比，便于定位大体积依赖与资源。
直接在 vite.config.ts（或 vite.config.js）里加插件，打包时自动生成可视化报告，一眼看出谁占体积最多。
安装插件
执行命令安装：
- npm install -D rollup-plugin-visualizer
- 或 yarn add -D rollup-plugin-visualizer
- 或 pnpn add -D rollup-plugin-visualizer
配置 vite.config.ts
导入并注册插件，建议只在分析时启用，避免日常构建干扰：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
vue(),
// 仅当需要分析时开启，上线前可注释掉
visualizer({
open: true, // 打包完成后自动打开报告页面
gzipSize: true, // 显示 gzip 压缩后大小
brotliSize: true, // 显示 brotli 压缩后大小
filename: 'stats.html' // 报告保存路径，默认在 dist 目录下
})
]
})
运行打包并查看报告
执行构建命令：
- npm run build
- 打包完成，浏览器会自动弹出
stats.html页面 - 默认使用 treemap（矩形树图），直观显示各模块体积占比；也可切换 sunburst、network 等视图模式
进阶建议
避免每次构建都触发分析，推荐按需启用：
- 用环境变量控制：比如
VITE_VISUALIZE=1 npm run build，再在配置中判断process.env.VITE_VISUALIZE === '1' - 或把插件配置抽成独立文件，在需要时动态 import
- 报告中重点关注
node_modules下的第三方库（如 element-plus、echarts）、未拆分的 vendor chunk、静态大资源（如 JSON、图片）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
