Vite DevTools 随 Vite 8 Beta 发布：构建过程可视化分析工具正式上线

昨天刷推时，看到 尤大（Evan You）转发的一条消息，核心内容挺让人兴奋：

📣 Vite DevTools 在 Vite 8 Beta 中正式可用了！

这个消息对于 Vite 生态来说意义不小。一直以来，我们虽然享受着 Vite 飞快的构建速度，但构建过程内部到底发生了什么，其实是一个“黑盒”。Vite DevTools 的出现，终于把这个黑盒打开了。

通过 Vite DevTools，你将能够：

• 🔍 查看模块依赖关系
• ⚡ 分析插件执行过程
• 📦 可视化 chunk 结构
• 📊 分析 bundle 体积
• 🔁 对比两次构建结果

简单来说：

Vite DevTools = Vite 构建过程的可视化分析工具

什么是 Vite DevTools

Vite DevTools 是 Vite 官方推出的一套构建分析与可视化工具。

它的目标很明确：

🚀 让 Vite 的构建过程完全可视化

以前我们只知道执行：

npm run build

然后得到一个 dist 目录。但现在通过 Vite DevTools，你可以看到完整的构建流水线：

source files
   ↓
plugin transform
   ↓
module graph
   ↓
chunk splitting
   ↓
bundle output

也就是说：

• 每个模块如何被处理
• 每个插件做了什么
• 每个 chunk如何生成

全部都能清晰呈现。这对于性能优化、插件调试、理解构建流程都非常有价值。

Vite DevTools 核心特性

Vite DevTools 内置了多个分析模块，可以从不同角度深入分析你的项目构建。

Overview（构建概览）

Overview 面板提供整个构建的总体信息，例如：

• ⏱ 构建时间
• 📦 模块数量
• 🔌 插件数量
• 📁 输出目录
• 📊 bundle 大小

示例数据如下：

Build time: 1.8s
Modules: 1245
Plugins: 12
Output: dist/

你可以快速了解整个构建的规模和性能情况。

Modules（模块分析）

Modules 面板可以查看：

• 项目中的所有模块
• 模块之间的依赖关系
• 模块被哪些插件处理

支持多种视图：List（列表）、Tree（文件树）、Graph（依赖关系图）。甚至可以追踪模块的完整处理流程：

resolve
  ↓
load
  ↓
transform
  ↓
bundle

这非常适合排查构建性能瓶颈。

Plugins（插件分析）

如果你的项目使用了很多 Vite 插件，这个功能会非常有用。

Plugins 面板可以查看：

• 所有插件
• 每个插件处理的模块
• 每个 hook 的执行时间

例如：

plugin-vue
resolve: 3ms
transform: 120ms

这样就可以快速发现到底是哪个插件拖慢了构建速度。

Chunks（代码分块）

Chunks 面板用于分析打包后的 chunk 结构。

例如：

index.js
vendor.js
chunk-abc.js

你可以查看：

• 每个 chunk 的文件大小
• 包含的模块
• chunk 之间的依赖关系

这非常适合优化 Code Splitting 策略。

Assets（资源分析）

Assets 面板展示构建后的所有资源：

• JS
• CSS
• 图片
• 字体
• 其他静态资源

并支持多种可视化方式：

• Treemap
• Sunburst
• Flamegraph

可以非常直观地看到哪个资源体积最大。

Packages（依赖分析）

这个模块用来分析 npm 依赖体积。

可以查看：

• 每个依赖的 bundle size
• 依赖关系
• 是否存在 重复依赖

例如：

lodash (2 copies)
react (1 copy)

对于大型项目来说，这是非常实用的优化工具。

Session Compare（构建对比）

Vite DevTools 还支持对比两次构建结果。

例如：

bundle size +40kb
modules +120
chunks +2

这样可以快速发现：是哪一次提交导致 bundle 变大。

如何快速使用

目前 Vite DevTools 仍然处于 Alpha 阶段，需要使用 Vite 8 Beta。

安装 Vite 8 Beta

更新你的 package.json 依赖：

{
  "dependencies": {
    "vite": "^8.0.0-beta"
  }
}

安装 DevTools

pnpm add -D @vitejs/devtools

配置 vite.config.ts

import { DevTools } from '@vitejs/devtools'

export default {
  plugins: [DevTools()]
}

执行构建

pnpm build

构建完成后即可打开 DevTools UI 查看构建分析结果。

界面一览

Vite DevTools 的界面采用类似 Dock 的工具栏设计，不同分析工具会以面板形式展示。

总览：快速概览构建分析，包括构建条目、持续时间、目录、模块数量、插件等。

模块：以列表、详细列表、图表和文件夹树视图显示捆绑包中的所有文件。

插件：显示所有插件，支持类型筛选和模糊搜索。

资产：以列表、文件夹树、树状图、旭日图和火焰图视图显示构建输出中的所有静态资源。

开发者可以在不同面板之间自由切换，全方位查看各种构建信息。同时 Vite DevTools 还提供 DevTools Kit，允许插件作者扩展新的 DevTools 面板。这意味着：

🔧 未来可能会出现很多第三方 DevTools 插件

Vite 一直以来最大的优势就是极快的开发体验和优秀的构建速度。而 Vite DevTools 的出现，让 Vite 又补上了一块非常重要的拼图：构建可视化与分析能力。

以前如果想分析 bundle，我们可能需要借助 webpack-bundle-analyzer 或 rollup-plugin-visualizer 这类第三方工具。而现在：

🎉 Vite DevTools 官方直接提供了一整套分析工具

这对于前端工程化、构建性能优化、插件开发、框架开发等领域都会非常有帮助。不得不说，Vite 的生态正在变得越来越完整。对于这类新工具的实践和讨论，欢迎来云栈社区的开源实战板块交流。

• Vite DevTools 官网：https://devtools.vite.dev/
• Github 地址：https://github.com/vitejs/devtools