【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（如 resolve、transform）的执行耗时，便于定位慢插件。

代码分块（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

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

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

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

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

总结

这五个项目其实构成了一个完整生态：

复制代码

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

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

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

前言：vite新生态布局

Vite+：统一 Web 工具链

Vite 8 ： 新一代构建核心

Vite DevTools：官方调试工具

Void：Vite 原生部署平台

Vitest 4.1

总结

Vite 8 ： `新一代构建核心`