JavaScript 中怎么在 Vite 中使用可视化插件分析打包体积分布-js教程-PHP中文网

在 vite 项目中分析打包体积最常用高效的方式是使用 rollup-plugin-visualizer 插件，它基于 rollup 生成交互式 html 图表，展示模块、依赖及资源的体积占比与依赖关系；安装后在 vite.config.ts 中配置插件，构建时自动生成 dist/stats.html 可视化报告，支持 treemap 等多种视图、gzip/brotli 大小显示及排序筛选，并指导优化第三方库引入、重复依赖、代码分割和资源压缩。

javascript 中怎么在 vite 中使用可视化插件分析打包体积分布

在 Vite 项目中分析打包体积分布，最常用且高效的方式是使用 rollup-plugin-visualizer 插件。它能生成直观的交互式 HTML 图表，清晰展示各模块、依赖、资源的体积占比和依赖关系。

安装并配置 visualizer 插件

该插件基于 Rollup（Vite 底层构建器），需作为 Vite 插件引入。执行安装命令：

npm install -D rollup-plugin-visualizer

然后在 vite.config.ts（或 .js）中添加插件：

import { visualizer } from 'rollup-plugin-visualizer';
<p>export default defineConfig({
plugins: [
// 其他插件...
visualizer({
open: true, // 构建后自动打开分析页面
filename: 'stats.html', // 输出文件名，位于 dist/ 目录下
template: 'treemap', // 可选：'treemap'（推荐）、'sunburst'、'network'
})
]
});</p>

触发体积分析并查看报告

运行构建命令即可生成分析报告：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

npm run build

构建完成后，插件会自动生成 dist/stats.html，并在浏览器中打开。页面以可视化图谱形式呈现：

每个矩形块代表一个 chunk 或模块，面积大小对应体积
颜色深浅可反映压缩后大小或 gzip 后大小（取决于配置）
支持鼠标悬停查看详细路径、原始大小、gzip 大小、依赖来源
顶部筛选栏可按“name”“size”“path”排序，快速定位大体积模块

进阶用法：分析开发环境或指定构建模式

默认只在 build 时生效。如需在 dev 模式下也启用（例如调试 HMR 加载模块），可通过条件判断控制：

visualizer({
  open: process.env.NODE_ENV === 'production',
  filename: 'stats.html',
  gzipSize: true, // 显示 gzip 后大小（更贴近真实加载体积）
  brotliSize: true, // 同时显示 brotli 压缩大小（需 Node ≥ 14.17）
})

还可配合 npm run build -- --report 自定义输出路径，或使用 emitFile 将报告写入其他目录。