🌐 今日要闻

打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。

欢迎阅读《Web 周刊》，上周全球 Web 开发圈的主要情报如下：

• 🎉 尤大出席 Vue 大会，发表了关于 Vue & Vite 的重要讲话
• ✨ Vue 生态“文艺复兴“，“蒸汽模式“公测，Pinia Colada 新品首发
• ✅ TC39 工作组推进 ECMA 源码映射规范
• 👍 Vite 生态“工业革命“，Vite+ 全家桶免费开源
• 🙏 尤大爆料 Void 一键部署云平台，Vite 进军全栈开发

PS：本文附带甜妹解说的动画视频，粉丝请搜索哔哩哔哩@Web情报局。

🎉 Vue 生态文艺复兴

近日，Vue 之父 & Vite 之父 & VoidZero CEO 尤雨溪出席了 Vue 阿姆斯特丹大会和 D2 技术大会，发表了重要讲话。

本期我们就来回顾一下这位“前端之神“已公开的关于 Vite & Vue 生态的最新情报和未来规划。

Vue 3.6 Beta

Vue 是 GitHub 第二 UI 框架，也是唯一一个同时支持 SFC（单文件组件）/ JSX、集成 Signals（细粒度响应性）的渐进式框架。

Vue 目前发布了 v3.6-beta（公测版），主要包括：

• 移植 alien-signals 重构 @vue/reactivity
• 新增可选的 Vapor Mode 编译模式，这是一种专属于 <script setup> SFC 的无虚拟 DOM “蒸汽模式“
• Vapor Mode 是 Vue 当前 API 的子集，所以部分功能受限，比如不支持 <Suspense /> 组件和 Options API

尤大最初在 2022 透露了 Vapor Mode（蒸汽模式），去年 Vue 从 Alpha 顺利晋升到 Beta，今年有望正式发布。但考虑到尤大还需要兼顾 Vite+ 等海量开源项目，暂不确定，敬请期待！

Vue Router 5.0

Vue Router 是 Vue 生态官方的客户端路由库，年初发布了 v5.0 主版本，主要包括：

• 不再依赖 unplugin-vue-router，将其集成为 vue-router/unplugin，支持基于文件的路由
• IIFE 构建不再包含 @vue/devtools-api，该模块升级到 v8.0 之后，不再提供 IIFE 格式
• v5.0 是一个过渡版本，v6.0 将只支持纯 ESM 模块

Pinia Colada v1 首发

Pinia 近期没有主/次版本更新，但上线了新的产品 Pinia Colada。

Pinia Colada 是基于 Pinia 的 Vue 专属异步状态管理库，第一个主版本正式发布，优点在于：

• 支持缓存、去重、SWR（过期重验证）等高级功能，不用我们自己定义相关复杂逻辑
• 无需手写 isLoading 等属性，内部封装后暴露这些接口
• 消除数据请求的大量重复模板代码，更符合人体工学

Nuxt 4.4

Vue 生态的第一全栈元框架 Nuxt 发布了 v4.4 次版本，主要包括：

• 新增 createUseFetch() 等工厂函数，支持组合拦截器定义高级实例，比如创建带有默认选项的 useApiFetch() 来替换 useFetch()
• 新增 useAnnouncer() 组合函数和 <NuxtAnnouncer /> 组件，适用于页面内容动态变化、但焦点不变的场景，比如表单提交
• 更棒的 import 保护，现在会显示建议和完整的追踪信息
• 构建性能分析报告，显示构建阶段或打包插件的持续时间等数据，轻松诊断性能瓶颈

🎉 Vite 生态工业革命

而 Vite 生态，尤大所在的 VoidZero 团队掀起了一场前端“工业革命“。

上周我们提到了 Rust 驱动的第一个 Vite 稳定版 Vite 8 正式发布，替换 Rollup + esbuild，采用 Rolldown + Oxc，性能爆表。

此外，基于 Oxc 编译器的格式化神器 Oxfmt 发布了 beta（公测版），JavaScript 跟 TypeScript 的格式化功能 100% 兼容 Prettier，但性能比快了 30 倍。

本期补充更多 Vite 生态的进展，包括 Oxlint 和 Vitest。

Oxlint JS 插件 Alpha

ESLint 的 Rust 移植版 Oxlint 也有新进展，它的 JS 插件进入 Alpha 阶段，目前 100% 通过 ESLint 内置规则的官方测试套件。

具体而言，Oxlint 采用 Rust 重写了 650+ 多条代码质检规则，涵盖了 ESLint 的大部分规则。即使没有使用 Rust 重写的规则，Oxlint 也提供了 oxlint-plugin-eslint 插件来无缝迁移，使得 Oxlint 100% 兼容 ESLint 的所有内置规则。

性能方面，Oxlint 团队把 Node 源码库的 ESLint 替换掉，进行测评跑分，性能暴涨近 5 倍。

Oxlint JS 插件的成熟意味着目前 JS 生态现存的 ESLint 插件，比如非官方的社区插件，也能无缝迁移到 Oxlint 项目。这样用户无需重写插件，同时部分受益于 Rust 的原生性能。

Vitest 4.1

Vite 生态衍生的 Vitest 是 GitHub 前十的测试框架，近期也发布了 4.1 次版本，主要包括：

• 采用新鲜出炉的 Vite 8
• 测试标签分组，按标签设置或筛选测试，借鉴 pytest 筛选标签的自定义语法
• 开发体验优化，比如自定义 UI 窗口配置，Playwright 追踪视图改进，自动生成 GitHub Actions Job 摘要
• Vitest 的 VS Code 扩展现在支持 Deno，import 语句后会显示模块加载时间

🛜 官方情报

ECMA-426 源码映射格式规范

Source Map（源码映射）是一种特殊的 JSON 文件，用于在我们编写的源码和运行时代码之间进行映射。

举个栗子，我们在开发时可能编写一些强大的方言，比如 Sass 或 TypeScript，再把它们转换成 HTML、CSS 或 JavaScript，这样浏览器才能正常执行。

问题在于，当我们使用 devtools（开发者工具） debug 时，我们希望直接定位到源码，而不是编译或压缩后人类不可读的代码。

这时就要用到 Source Map 了，这个 JSON 文件中保留了源码和运行时代码之间的映射关系，比如哪一行、哪一列等等。

过去，Source Map 并未被标准化，大家通过一份谷歌文档约定实现，但一些功能始终无法协调。

为此，彭博社成立了 TC39-TG4（源码映射工作组），制定了 ECMA-426（源码映射格式规范）。

近年来，它们标准化了更多功能，Scopes 和 Range Mappings 也即将上线 devtools！

React 文档更新

React 文档更新了 <ViewTransition /> 组件结合 <Activity /> 组件章节，如果你想让组件在保持状态的同时实现进场或出场动画，可以使用 <Activity /> 组件。

Svelte 最佳实践

Svelte 文档更新了“最佳实践“章节，帮助大家编写快速健壮的 Svelte 应用，可以将 svelte-core-bestpractices 投喂给 AI 代理作为 Skills 使用。

🛠️ 工具推荐

Vite+ 全家桶开源

随着 Vite 生态的各个工具逐渐成熟，尤大创立的 Void Zero 公司也官宣：Vite+ 进入 Alpha 阶段！

Vite+ 是将 Vite 生态所有开发工具叠加在一起的一体化工具链，由 Vite Task 任务运行器驱动，提供了 vp install / vp dev 等命令。

具体而言，Vite+ 把 Vite 生态的所有流行的开源软件 —— Vite、Vitest、Oxlint、Oxfmt、Rolldown 和 tsdown 都添加到一个全家桶，用于开发、测试、代码质检、格式化和构建生产环境项目。

此外，Vite+ 还支持管理 pnpm / Bun 等包管理器，甚至能管理 Node 的版本。同时，我们配置的 lint 或格式化规则，比如 eslint.config.js 或 .prettierrc 等配置文件，可以整合到单一的 vite.config.js 中。

之前，Vite+ 原本要求对企业用户付费授权，现在尤大直接开源，完全免费。不管是公司还是独立开发者，都能纵享丝滑了，感谢 Void Zero 的慷慨！

随着 Vite+ 官宣 Alpha 版本，很多项目开始试用，Vite+ 目前已经集成到 Vue 源码的相关分支，还有 Vue CLI create-vue，进一步投入到生产环境测评。

Void Cloud 全栈开发

尤大在 Vue 大会演讲的最后，致敬乔布斯经典的“One More Thing“环节放大招，透露了新产品 Void Cloud。

VOID 是 Vite+ / Optimized（优化）/ Isomorphic（同构）/ Deployment（部署）这几个设计理念的首字母缩写，这是一款 Vite 专属的云服务插件，也是一个也云服务平台，或者全栈元框架。

Void 内置了强大的后端 SDK（软件开发工具），包括数据库、键值存储、对象存储、AI 推理、身份认证等后端应用常见功能，可以按需采用。

由于 Void 基于 Vite 生态，因此所有前端框架/元框架天然支持，比如 React、Vue、Nuxt 等，且支持静态站点生成或服务端渲染等不同渲染方式。

Void Cloud 旨在让 Vite 用户能够一键部署，直接上线全栈应用，标志着 Vite 生态将进军全栈开发领域。

Antdv Next 组件库

我一般不推荐组件库，因为 GitHub 有大量成熟的组件库供大家白嫖，容易选择困难。但最近新出了一个 Vue 3 的组件库，它就是 Antdv Next！

Antdv Next 是一套开箱即用的高质量 Vue3 企业级组件库，基于阿里系的蚂蚁设计系统构建。

阿里系之前 Ant Design Vue 是比较流行的组件库，虽然其源码仓库还有提交，但我发现 2024 之后就没有再发布新版本了，目测不会推出新功能了。Ant Design Vue 支持 Vue 2 和 Vue 3，而 Antdv Next 只服务于 Vue 3。

我粗略看了一下，Antdv Next 采用了现代化的技术栈，比如 Vite / Vitest / pnpm 等，可以集成 AI、UnoCSS、Tailwind CSS 等。

Vue 初学者最不习惯的应该是 Antd 系列的组件源码都是基于 TSX 来实现，而不是常见的 SFC，但这只影响开源贡献，不会影响我们以 SFC 的方式使用。

由于组件实现采用了 TSX，Antdv Next 的自定义主题相应地也采用了 CSS-in-JS，其主题是目前我个人比较喜欢的亮点之一。

总之，Antdv Next v1.0 已经正式官宣，值得继续关注，欢迎大家去 GitHub star 支持一波～

🙏 特别鸣谢

以上就是本期《Web 周刊》的全部内容了，希望对你有所帮助。

👍 感谢大家按赞跟转发分享本文，你的手动支持是我坚持创作的不竭动力喔。

😘 已经关注我的粉丝们，我们下期再见啦，掰掰~~