从 Vite 到 Vize:Vue 开发体验的下一次飞跃

334 阅读5分钟

从 2019 年开始,前端的底层工具链就陆续使用 Rust 重写,这一次轮到 Vue 了。

Vize 横空出世!

一个基于 Rust 编写的、为 Vue.js 量身定制的一体化开发工具;通过原生级的速度,将 Vue 原本碎片化的编译、校验、格式化、类型检查、开发预览合并为一个极速、零配置的工具。

Vize 什么来头?

2026 年 2 月 22 号发布,首发就获得了尤雨溪的关注。

作者 ubugeeeiVue.jsVue.js JP 的成员。

Vize 能做什么:

  1. 极速编译 .vue 文件

比传统 JS 编译器快很多,大型项目秒开。

  1. 统一全流程 AST

编译、Lint、格式化、类型检查共用一套解析结果,不重复干活。

  1. 代码检查 + 格式化

替代 ESLint、Prettier,速度更快、规则更统一。

  1. 组件库可视化管理

预览、调试、文档、测试一体化,替代 Storybook。

  1. 对接 AI 助手

通过 MCP 让 AI 直接读取组件信息,写代码更准。

  1. 深度集成 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 开发者服务,提供更深度的优化

从而实现了工具链的‘归一化’,让前端开发者得以从插件地狱中解脱出来。

快速使用

目前该项目还处在开发阶段,想尝鲜的朋友不妨试试。

环境要求:Node.js 20+,pnpm 9+,vite 8+

安装

# 全局安装使用
npm install -g vize
# 仅安装 vite 插件使用
npm install @vizejs/vite-plugin

配置

// vite.config.ts
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-sfceslintprettiervue-tscStorybook

性能怪兽

官方一次性测试,编译 15000SFC 文件(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 值得你去关注和了解。

👍作品推荐

Haotab 新标签页,一个优雅的新标签页

chrome 商店 | edge 商店 | 在线版

❤️静待你的体验