⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!

前言

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

文章链接:voidzero.dev/posts/voidz...

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

Vite DevTools 问世之前,我们暂时可以使用下面的两个插件替代一段时间!

往期精彩推荐

正文

Sonda 插件

功能

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

适用场景

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

安装与使用

首先安装 Sonda 插件:

bash 复制代码
npm install sonda --save-dev

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

js 复制代码
import { defineConfig } from 'vite';
import Sonda from 'sonda/vite';

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

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

vite-plugin-inspect 插件

功能

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

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

适用场景

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

安装与使用

先执行安装命令:

bash 复制代码
npm install -D vite-plugin-inspect

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

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

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

最后

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

往期精彩推荐

相关推荐
weixin_584121433 分钟前
vue3+ts导出PDF
javascript·vue.js·pdf
Zacks_xdc30 分钟前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
尚学教辅学习资料30 分钟前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|38 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript