JavaScript 中 Vite 怎么打包生成分析报告看体积-js教程-PHP中文网

最常用且官方推荐的方式是使用 vite-plugin-visualizer 插件，它能生成交互式 html 报告，直观展示各模块、依赖包的体积占比，帮助快速定位“体积大户”。

javascript 中 vite 怎么打包生成分析报告看体积

在 Vite 项目中生成打包体积分析报告，最常用且官方推荐的方式是使用 vite-plugin-visualizer 插件。它能生成交互式 HTML 报告，直观展示各模块、依赖包的体积占比，帮你快速定位“体积大户”。

安装并配置 vite-plugin-visualizer

在项目根目录运行：

npm install -D vite-plugin-visualizer

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

import { visualizer } from 'vite-plugin-visualizer'

export default defineConfig({
  plugins: [
    // 其他插件...
    visualizer({
      open: true, // 构建后自动打开报告页面
      filename: 'stats.html', // 输出的 HTML 文件名
      template: 'treemap', // 可选：'sunburst' | 'network' | 'treemap'
    })
  ]
})

执行构建并查看报告

运行构建命令：

npm run build

构建完成后，插件会自动生成 dist/stats.html（或你指定的路径），并默认用浏览器打开。页面中可：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

鼠标悬停查看每个模块的大小和路径
点击节点展开/收缩依赖树
按大小排序，快速识别 top N 大的 chunk 或第三方库
切换视图模式（如 treemap 更适合看占比，sunburst 更适合看嵌套关系）

进阶技巧：只分析不构建 / 分析特定环境

如果只想生成报告而不真正输出生产文件，可以临时加参数：

VITE_VISUALIZER=1 npm run build

或者在脚本中单独定义一个分析命令（推荐）：

// package.json
"scripts": {
  "build:analyze": "vite build --mode production && vite build --mode analyze"
}

再配合插件配置中的 emitFile: true 和条件启用，可做到仅分析阶段加载 visualizer。

替代方案：使用 rollup-plugin-analyzer（较少用）

如果你用的是 Rollup 配置（非 Vite 默认），也可尝试 rollup-plugin-analyzer，但对 Vite 用户来说兼容性不如 visualizer，且不支持原生 ESM 分析。Vite 官方文档明确推荐 vite-plugin-visualizer 作为标准方案。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南