登录
从 Vite 到 Vize：Vue 开发体验的下一次飞跃
从 2019 年开始，前端的底层工具链就陆续使用 Rust 重写，这一次轮到 Vue 了。
Vize 横空出世！
一个基于 Rust 编写的、为 Vue.js 量身定制的一体化开发工具；通过原生级的速度，将 Vue 原本碎片化的编译、校验、格式化、类型检查、开发预览合并为一个极速、零配置的工具。
Vize 什么来头？
2026 年 2 月 22 号发布，首发就获得了尤雨溪的关注。
作者 ubugeeei 是 Vue.js 和 Vue.js JP 的成员。
Vize 能做什么：
- 极速编译 .vue 文件
比传统 JS 编译器快很多，大型项目秒开。
- 统一全流程 AST
编译、Lint、格式化、类型检查共用一套解析结果，不重复干活。
- 代码检查 + 格式化
替代 ESLint、Prettier，速度更快、规则更统一。
- 组件库可视化管理
预览、调试、文档、测试一体化，替代 Storybook。
- 对接 AI 助手
通过 MCP 让 AI 直接读取组件信息，写代码更准。
- 深度集成 Vite
作为高性能编译器插件，直接提升整个项目速度。
Vize、Vite、Vite+
兄弟而非对手，Vize 不是要取代 Vite。
两者的区别在于：
- Vite：前端通用构建工具
- Vize：Vue 编译器工具链
它们分工明确：
- Vite：管整个项目怎么跑、怎么构建
- Vize：管 .vue 文件怎么编译得更快
事实上，Vize 的许多功能都是建立在 Oxc 等基础技术之上的。
在 Vite 配置中，通过 @vizejs/vite-plugin-vize 替换 @vitejs/plugin-vue，让 Vite 的编译速度大幅提升。
Vize 和 Oxc
从技术底层看，两者功能确实有重叠，但 Vize 的核心价值在于针对 Vue SFC（单文件组件）的深度集成与语义理解。
oxlint 和 oxfmt 是通用的工具：
- 处理纯
.js文件 - 处理纯
.ts文件 - 支持 React、Vue、Svelte 等
而 Vize：
- 处理 .vue 文件中的
<script> - 处理 .vue 文件中的
<template> - 处理 .vue 文件中的
<style> - 专为模版指令(v-if,v-for)研发的编译器和检查器
Vize 内部使用了 Oxc 的能力来处理 JS 和 TS。
oxlint / oxfmt 目标是：取代 ESLint 和 Prettier。
Vize 目标是：取代 vite-plugin-vue + vue-tsc + eslint-plugin-vue。
你在项目中安装了 Vize，可以不用再单独安装 oxlint 和 oxfmt。
Vize 实际上是把 Oxc 的散装零件（oxlint, oxfmt, resolver）组装成了一台专门跑 Vue 的“超级跑车”，只为 Vue 开发者服务，提供更深度的优化。
从而实现了工具链的‘归一化’，让前端开发者得以从插件地狱中解脱出来。
快速使用
安装
npm install -g vize
配置
import { defineConfig } from 'vite'
import vize from '@vizejs/vite-plugin';
export default defineConfig({
plugins: [
vize()
],
})
支持 Nuxt
Vize 同样支持 Nuxt， Nuxt 在 Vue 生态中的重要性不言而喻，大多数首发的项目都会支持 Nuxt。
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vizejs/nuxt'],
vize: {
compiler: true,
musea: {
include: ['**/*.art.vue'],
},
},
});
核心功能
# vue 组件编译
vize build
# 代码校验
vize lint
# 代码格式化
vize fmt
# 类型检查
vize check
# 组件预览
vize musea
# 编辑器集成
vize lsp
架构设计
Vize 采用的是典型的 Rust crate 层架构设计：
这是 Vize 最基础的流水线，负责将原始.vue文件转化为可执行的 JS 代码：
源码输入 → 分词解析 → AST中间表示 → 语义分析 → 多目标编译 → 工具层 → 上层应用
这种一体化的设计让 Vize 可以统一语义引擎驱动所有工具。
一个 Vize 就能代替 compiler-sfc、eslint、prettier、vue-tsc、Storybook
性能怪兽
官方一次性测试，编译 15000 个 SFC 文件(36.9MB)：
Vue 文件编译
- vue 官方编译：
10.52s - vize 单线程耗时：
3.82s - vize 多线程耗时：
0.38s
⭐️ 单线程提速 2.8 倍
⭐️ 多线程提速 9.8 倍
⭐️ vize 多线程对原生单线程，高达 27.7 倍的极致提速
代码检查
- eslint:
65.3s - vize:
5.45s
⭐️ 提速 12 倍
代码格式化
- prettier:
82.69s - vize 单线程：
0.036s - vize 多线程：
0.023s
⭐️ 单线程提速 2303 倍
⭐️ 多线程提速 872 倍
类型校验
- vue-tsc：
35.69s - vize:
0.369s
⭐️ 提速 97.7 倍
Vite 构建
- vite 官方：
16.98s - vize:
6.9s
⭐️ 提速 2.5 倍
如此快的速度得益于：
- 没有垃圾回收机制(GC)
- 没有即时编译(JIT)预热
- Rayon 原生多线程
- 高缓存命中率
- 文件级增量编译
这令人震撼的速度不亚于当初 Vite 对 Webpack 的碾压.
Vize 的编译器直接将代码编译为原生代码，生成单文件静态链接可执行程序，相比于 JS 工具链，这是 Rust 带来的质的飞跃。
组件库管理
Musea 是 Viza 置的组件库管理工具，是项目内组件的视化管理、预览、调试与文档工具」。
不管是你自己开发的项目内业务组件，还是专门的公共组件库，都可以用 Musea 来做后续的管理：
- 组件多变体预览、交互式 Props 调试
- 生成组件使用文档、无障碍 / 视觉回归测试
- 组件分类、搜索、管理，方便团队查阅和使用
- AI 助手，辅助生成使用代码。
也就是说，你在 components 目录中开发的组件，可以通过 Musea 进行可视化管理，一站式调试和编写文档，进行团队共享。
AI 能力
npm install @vizejs/musea-mcp-server
Vize 可以集成 MCP，让 AI 对组件的理解与开发者一致：
-
组件发现：快速查找项目内指定类型组件及对应变体并获取使用建议； -
代码生成：按项目真实组件的 props、类型生成准确代码，无属性幻觉； -
API 参考：查询组件真实的 API 定义，而非通用猜测； -
文档辅助：基于组件实际元数据生成精准的组件文档。 -
设计Token：查看、解析颜色、排版等各类设计令牌的列表、分类及原始值。
总结
在 Vue 的生态中，Vite 完成了构建的使命，而 Vize 完成了工具链的升级。
尤雨溪在 Vize 发布时就赞助了其作者，足见他对 Vize 的喜爱。
如果你在用 Vue 开发项目，那 Vize 值得你去关注和了解。
- 🔗 GitHub：github.com/ubugeeei/
- 🔗 Vize 官网：vizejs.dev
👍作品推荐
Haotab 新标签页，一个优雅的新标签页
❤️静待你的体验
