【vue】Vite 生态 5 个 “新玩具“

前言:vite新生态布局

最近,VITE相关资源有5个更新,分别为:

Vite+ --- 统一 Web 工具链

Vite 8 --- 新一代构建核心

Vite DevTools --- 官方开发调试工具

Void --- Vite 原生部署平台

Vitest 4.1 --- 测试框架升级

这不是零散更新,而是一整套生态布局

Vite+:统一 Web 工具链

Vite+ Alpha之前专门用一篇文章介绍过了

它是由 ‌VoidZero Inc‌ 开发的统一 Web 开发工具链,旨在解决 JavaScript 生态系统长期存在的‌工具碎片化‌问题,并为大型团队提供高性能、一体化的开发工作流。它并非 Vite 的简单升级版,而是基于 Vite 生态构建的‌全栈开发工具链超集‌。

换句话说:Vite+ 想成为 Web 的 cargo。

类似于:

语言 工具
Rust cargo
Go go tool
Python pip + python
Web Vite+(目标)

Vite 8 : 新一代构建核心

Vite 8 是前端构建工具 Vite 的重大版本更新,核心采用 Rust 编写的 Rolldown 统一引擎取代 esbuild + Rollup 双引擎架构,构建性能提升 10--30 倍。

Vite 8 主要是:架构升级、性能优化、插件系统完善Vitest 等工具更好协作

这也是 Vite 生态继续向前推进的重要基础版本。

新增功能特性:

内置 tsconfig paths 支持 ‌:通过resolve.tsconfigPaths: true可直接读取 tsconfig.json 中的路径别名,无需额外插件 。

emitDecoratorMetadata 内置支持‌:自动识别 tsconfig 并启用装饰器元数据生成,告别@babel/plugin-transform-typescript 配置 。‌‌

开发体验增强:server.forwardConsole ‌、‌内置 Devtools 支持、Wasm SSR 支持

高级构建能力‌:

  • 模块级持久缓存(实验性):大型项目二次构建更快。‌‌
  • 完整打包模式(Full Bundle Mode):开发服务器启动速度提升约 3 倍。‌‌
  • 模块联邦支持:类似 Webpack ModuleFederation,性能更高。‌‌

Vite DevTools:官方调试工具

Vite DevTools 是一个专门为 Vite 打造的开发调试工具,可以帮助开发者:查看 Vite 模块依赖关系、调试插件执行流程、分析 HMR 更新、查看模块加载情况、可视化构建流程。

简单理解就是:Vite 的"开发者控制台"。

对于开发插件或复杂应用来说,这是非常有用的工具。

核心功能

构建概览‌:显示构建时间、模块数量、插件数量、输出目录、bundle 大小等关键指标。

模块分析‌:查看所有模块及其依赖关系,支持列表、树状图、依赖图等多种视图,并可追踪模块从解析到打包的完整处理流程。

插件分析 ‌:统计每个插件处理的模块数及各 Hook(如 resolvetransform)的执行耗时,便于定位慢插件。

代码分块(Chunks)分析‌:可视化 chunk 结构,查看每个 chunk 的体积、包含模块及相互依赖。

**资源分析(Assets)**‌:以 Treemap、Sunburst、Flamegraph 等方式展示 JS、CSS、图片等静态资源体积分布。

‌**依赖分析(Packages)**‌:分析 npm 依赖的 bundle size、重复依赖情况。

**构建对比(Session Compare)**‌:对比两次构建结果,快速识别 bundle 变大、模块增加等变化。

使用方式

1、安装

复制代码
npm install vite@^8.0.0-beta


pnpm add -D @vitejs/devtools

2、配置

复制代码
import { DevTools } from '@vitejs/devtools'

export default {
  plugins: [DevTools()]
}

3、运行

复制代码
pnpm build

构建完成后,自动打开 DevTools UI(默认在浏览器中展示)。

Void:Vite 原生部署平台

Void 提供的能力包括:

自动创建基础设施(DB / KV / Storage / Queue

Type-safe 全栈 SDK

支持 React / Vue / Svelte / Solid

SSR / SSG / ISR / Islands

AI 原生工具

一键部署

也就是说,你开发一个 Vite 应用,可以直接:vite dev→vite deploy

在一个生态里完成:开发 → 构建 → 测试 → 部署

Vitest 4.1

VitestVite 生态的测试框架。与 Vite 的配置、转换器、解析器和插件通用,将会使用应用中的相同配置来运行测试。

Vitest 的特点是:Jest API 兼容、原生 TypeScript、启动速度极快、与 Vite 模块系统完全一致

新版本主要更新包括:支持 Vite 8 、灵活的测试标签系统、异步泄漏检测、新 tracing / AsyncLocalStorage hooks、减少 token 使用

对于使用 Vite 的项目来说,Vitest是最自然的测试选择。

总结

个项目其实构成了一个完整生态:

复制代码
VoidZero
│
├─ Vite+       → 工具链入口
├─ Vite8        → 构建工具
├─ Vite DevTools → 调试工具
├─ Void        → 部署平台
└─ Vitest      → 测试框架

它更像是 Vite 生态的一次系统升级 。把Web 开发工具链统一起来。

相关推荐
风之舞_yjf2 小时前
Vue基础(29)_props配置项、ref属性
前端·vue.js
Fairy要carry2 小时前
项目03-手搓Agent之团队协作(发消息/分配任务)
linux·前端·python
hzb666662 小时前
xd_day32-day40
java·javascript·学习·安全·web安全·tomcat·php
东北甜妹2 小时前
Python脚本
java·开发语言·前端
四千岁2 小时前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
你挚爱的强哥2 小时前
【sgCreateQrcode】自定义组件:模仿草料二维码做了一个简单的二维码制作组件
javascript·vue.js·elementui
ssshooter3 小时前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构
半世轮回半世寻3 小时前
这 5 个 Elements 小技巧,真的能提高调试效率
前端·浏览器
kyriewen3 小时前
for...of 的秘密:迭代器与可迭代对象,你也能创造“可循环”的东西
前端·javascript·面试