Vite 作为 2025 年满意度最大的技术，下载量已经超过的 webpack，加入 Vite 工具链变成一种趋势，而这次是 Nextjs！

Next.js 13.4 之前，webpack 是默认的构建工具，Next.js 13.4 及以上版本引入了 Turbopack 作为开发环境的默认工具，但生产环境目前仍主要依赖 webpack 进行最终打包。

2 月 25 日，Cloudflare 发布了 Vinext。

在 Vite 上重新实现了 Next.js 的 API，让开发者可以脱离官方的 webpack 和 Turbopack，转而使用 Vite 来 构建 Next.js 应用。

AI 开发，人类主导

Vinext 是一个极具探索性的项目。

使用 Claude Code 开发：

• 绝大部分代码
• 测试
• 文档
• 一周内完成

架构、优先级和设计决策则由人类主导。

AI驱动的开发过程

1. 适配 AI 开发的条件：Next.js 文档/测试完善、Vite 提供坚实基础、新一代 AI 模型可处理大型代码库复杂度
2. 开发流程：定架构→拆任务→AI写代码+测试→自动验证+迭代
3. 投入：800+ 次 OpenCode 会话，代码通过严格的测试、类型检查与CI验证

AI 完成代码评审，人工把控方向与纠错。

Vinext 的核心

Vinext 底层基于 Vite 开发，开发者可以直接享受到 Vite 庞大的、干净且标准化的插件生态。

对于 Next.js 来说，目前的痛点：

• 本地服务器启动慢
• HMR 速度慢
• 无服务器生态适配难
• 与 Vercel 强绑定，部署至第三方平台配置复杂
• 适配方案 OpenNext 成本高、维护困难
• 开发与构建流程与 Node.js 强绑定，跨平台体验差

而 Vinext 的优势非常明显👇🏻

极致的性能表现

vinext 通过底层重构，显著提升了 Next.js 在开发和生产阶段的性能指标。

• 构建速度飞跃：生产环境提速 4 倍。
• 包体积更小：体积比原生 Next.js 缩小了 57%。
• 瞬时 HMR：开发环境下，瞬时热更新，极致的开发体验。

边缘原生，解决部署痛点

• 零冷启动部署：几乎没有冷启动延迟。
• 开发生产一致性：支持在开发环境调用 Cloudflare 的平台 API，避免开发环境和生产环境不一致的尴尬。
• 脱离厂商锁定：不和 Vercel 强绑定，可自由地部署在第三方平台。

创新技术：流量感知预渲染

这是 Vinext 最具差异化的技术优势：

• 精准优化：通过真实分析数据，识别出那些 10% 贡献了 90% 流量的热门页面。
• 按需生成：预渲染高频页面，保证用户的极速体验，缩短大型站点构建时间，避免冷门页面的浪费。

迁移与兼容成本极低

• 无感迁移：支持一键转换，不破坏原有的 Next 配置，做到共存
• 高覆盖率 API：实现了约 94% 的 Next.js 16 API
• AI 赋能：专门的 AI Agent Skill，让 AI 助手自动处理迁移冲突

快速上手

安装：

npm install vinext

替换 Next：

{
  "scripts": {
    "dev": "vinext dev",
    "build": "vinext build",
    "start": "vinext start"
  }
}

核心命令：

# 启动开发环境
vinext dev   
# 构建打包
vinext build
# 构建并部署的到 Cloudflare Workers
vinext deploy       

AI 迁移助手

用 AI 助手帮助你将旧项目迁移至 Vinext。

安装 AI Skills

npx skills add cloudflare/vinext

在AI编码工具执行迁移命令，自动完成适配

npx skills add cloudflare/vinext

总结

cloudflare 推出 Vinext 无疑是开始掀桌子了，在发布后就获得了广泛的讨论，虽然该项目还处在实验阶段，但已经有一些项目开始使用了。

对于 Next.js 开发者，如果你想体验：

• Vite 生态
• 极致的开发体验
• 高效的打包构建
• 零启动的 Cloudflare 访问

不妨关注一下这个项目。

• 🔗 项目地址：github.com/cloudflare/…
• 🔗 官网地址：vinext.io/

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

Vize 横空出世！

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

Vize 什么来头？

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

作者 ubugeeei 是 Vue.js 和 Vue.js JP 的成员。

Vize 能做什么：

1. 极速编译 .vue 文件

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

2. 统一全流程 AST

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

3. 代码检查 + 格式化

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

4. 组件库可视化管理

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

5. 对接 AI 助手

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

6. 深度集成 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 新标签页，一个优雅的新标签页

chrome 商店 | edge 商店 | 在线版

❤️静待你的体验

做前端开发很多年了，发现显示器是影响工作效率最大的因数。

相对于其他程序员，前端面对的开发场景要更复杂：

• IDE、浏览器、开发者工具、UI设计稿、API 接口，五个面板同时打开的痛苦谁懂
• 动辄上百行的 HTML
• 密密麻麻的 CSS 样式
• 还要处理浅色、深色模式
• 来来回回不停的切换面板
• 频繁的滚动查看

这一顿操作下来，眼累，手累，心更累，一块好的屏幕对前端开发来说真的太重要了。

早期我把显示器从 2K 升级到 4K，以为开发体验能大大改善，但其实改变是只是显示的细腻，整个工作的状态还是以前的方式。

直到新年，我把显示器换成了明基专业编程显示器RD280U，开发体验得到了质的飞跃。

相对于普通显示器，它的优势非常明显：

• 编程模式
• 夜间护眼
• 智慧蓝光
• 3:2
• 1200:1 高对比度
• 4K + 抗反射面板

3:2 黄金屏比，垂直视野多出一半

平时我们写代码，最烦人的就是频繁滚动鼠标找逻辑，而前端面对的是。

• vue 开发中混合的 html、js、css 代码
• 超长的 saas/less 文件
• 复杂逻辑下的多层引用的模块
• 开发者工具中的 DOM 树、CSS 样式
• vue devtools、react devtools 中多个面板的信息流

前端对横向信息的要求要更高。

而 明基RD280U 的 3:2 比例屏幕就是解决这个痛点的，用更少的滚动，查看更多的代码。

对比传统的 16:9 的屏幕：

• 单个屏幕显示的代码行数更多
• 一个 .vue 文件能同时看到 html/js/css 代码
• 查看函数之间的调用更方便
• 保持思维和操作的连贯性
• 减少鼠标滚动次数，省时省力

阅读源码、看文档都轻松了不少。

首创“编码专用色彩模式”，语法高亮更清晰

普通显示器的色彩是为视频或游戏设计的，而明基RD280U的核心之一就是行业内首创了编程专用色彩模式。

这不是简单的切换主题，只是调整颜色色值而已，而是通过硬件级的智能调节色彩参数，加强语法高亮效果，让代码更容易识别。

亮色编程模式

除了在 IDE 中编写代码，我们还需要：

• 查看文档，对接后端接口
• 检索资料，寻找技术方案
• 对照UI，一比一还原设计稿
• 熟悉项目，回看产品文档

那些普通的显示器：

• 白色背景下，强光刺激
• 色彩普通
• 代码关键字权重一样，不直观

这些场景下，亮色编程模式会做到：

• 缓解“眩光感”
• 模拟纸质书读感
• 色彩区分度增强

非常适合在采光良好的办公室，查看白底文档时使用。

深色编程模式

写代码时，程序员一般都喜欢深色背景，容易进入心流状态，专注于代码本身。

对于普通的显示器：

• 背景往往不是纯黑，发灰
• 文字、字符边缘发散
• 暗部细节不明显，观感差

而深色编程模式能做到：

• 提升色彩纯度
• 消除黑色背景的“灰感”
• 防止暗部细节丢失

最终呈现的是：专门锁定的高频高亮的语法色彩、通过硬件算法锐化边缘并提升饱和度。这样用起来会感觉，代码逻辑块之间的边界感更强，不需要费力辨认，扫一眼就能根据颜色抓到逻辑。

切换主题

硬件级的支持已经有了，但切换工作场景的时候，总不能频繁设置显示器的参数把，而且一般显示器修改设置的方式都很繁琐，好几个按钮放在显示器下边框位置，操作起来真是费劲。

明基RD280U最让我喜欢的一个小细节就是它在 logo 下方的面板上加了一个专用编程触键，一触就能进入编程模式，相当方便。

MoonHalo 智慧光环，深夜沉浸式氛围编程

很多前端人都是“夜猫子”，夜深人静，把房间的灯关上，打开电脑写代码，

RD280U 自带了 MoonHalo 智慧背光设计 + 夜间保护模式，很适合这种时候：

• 背光环补充环境光，减少眩光
• 屏幕显示更柔和，观感更舒适
• 自动调光，轻松省心
• 夜间护眼模式，减少视觉伤害
• 智慧蓝光，自动开启

这种氛围下，很容易进入“心流”状态。

强大的软硬件协同与接口

RD280U 的接口丰富：

• HDMI、DP1.4、Type-B
• 90W 全功能 Type-C
• 3 个 USB-A 接口
• 1 个耳机插孔

安装 Display Pilot 2软件，和硬件结合功能更是强大：

• 桌面分区
• 快捷键控制
• 集成搜索引擎快速检索
• 一套键鼠控制两个系统
• ...

通过设置键盘快捷键，也可以一键切换到编程模式，键盘快捷键+触控键两种方式，多种方便。

★

要想多台显示器组合的话，不想在桌面上看到杂乱无章的线缆，通过 MST 简化多显示器串联，减少桌面线缆。

总结

RD280U，一台超级生产力显示器：

• 3:2 黄金屏比
• 4K+ 超清分辨率
• 抗反射面板
• 编码专用色彩模式
• MoonHalo 智慧光环
• 智慧蓝光
• 夜间保护功能
• 90W 全功能 Type-C
• 多种快捷键

不管你是前端开发，还是后端开发，RD280U都能带来全新的编程体验，让人一键进入心流模式，显著提高开发效率和工作舒适度，大家新年想升级设备的真的可以冲！