《前端周刊》尤大官宣 Vite 8 稳定版首发！npm 新官网？React 官网更新。focusgroup 新功能！

Web情报局
0 阅读8分钟

🌐 今日要闻

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

欢迎阅读《Web 周刊》，上周 Web 开发圈的主要情报包括：

  • ⚡️ 尤大官宣 Vite 8，第一个 Rust 驱动的稳定版本正式发布
  • ✨ React 官网重写了 2 个 Hooks 文档，我学不动了
  • 🤝 谷歌诚邀大家测评 focusgroup，“后 HTML5 时代“的新功能
  • 📦 全新的 npmx 注册源网站上线，npm 官网惨遭“降维打击“

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

🎉 每周热搜

Rolldown + Vite 稳定版首发

Vite 是 GitHub 第一 构建工具，提供了基于原生 ESM 模块的开发服务器，和打包优化的构建功能。

Vite 团队官宣 Vite 8 正式发布，这是 第一个 使用 Rust 打包器 Rolldown 驱动的 稳定版本，标志着 Rust 催生的“前端工业革命“日益流行。

Vite 8 除了把 esbuild + rollup 换用为 Oxc + Rolldown，该主版本还有下列亮点。

首先是开发体验，新增 Vite Devtools 开发工具，可以直接从开发服务器调试；支持浏览器控制台转发到 CLI 终端，方便 AI 分析。

Vite Devtools

然后，内置了 TypeScript 功能，支持 tsconfig path，解析路径别名；支持 emitDecoratorMetadata 选项，无需安装外部插件。

此外，@vitejs/plugin-react v6 主版本更新，集成 Oxc，不再依赖 Babel；.wasm?init 导入可以在 SSR 环境运行。

最后，新增 Vite Plugin 插件官网，方便大家搜索 Vite 生态的插件。

vite-plugin.png

Vite 8 之前，为了避免反复造轮子，Vite 开发时使用 esbuild 快速编译，构建时使用 rollup 打包优化，但双打包机制“天衣有缝“，两种流程始终存在 不一致性。

为此，尤大组建 Rolldown 团队，换用 Rust 编写的 Rolldown 统一流程，它既兼容 Rollup 插件 API，又媲美 esbuild 的性能，构建速度暴涨 10 倍。

直至今日，我们终于拥有基于 Rust 的打包神器！

感谢尤大和 Vite 团队，感谢 esbuild、rollup 和所有社区贡献者～

🛜 官方情报

Vercel 重定向算法优化

Vercel 分享了一篇重定向算法优化的官方博客。

Vercel 采用 JSON 文件、Bloom filter 布隆过滤器，sharding 分片和二分搜索等优化技术持续迭代，实现了低延迟的百万静态重定向。

flow.png

React 文档重写

React 官网中，useActionState() 和 useOptimistic() 这两个 Hooks 的文档重写了。

useActionState() 涵盖了表单集成、错误处理等内容，useOptimistic() 渐进式教学，提供了从简单按钮高到复杂购物车的示例。

这部分文档还更新了互动教程，可以边玩边读。

react-state.png

JS 七年之痒

Patreon 耗时 7 年把百万行 JavaScript 代码迁移到 TypeScript，历经三大时期。

前期，团队授权引入 TS，自愿使用；中期，团队手动迁移，奠定类型良好的基建；后期，团队采用 ts-migrate codemods（代码批改工具），进一步借助 AI 肌肉自动批改，程序员负责复杂架构和最终审核，有组织地迁移。

如果你也有大型项目想要重构，可以借鉴这种渐进式的迁移方案。

focusgroup 新功能公测

无障碍的常见场景之一，是使用 Tab 和方向键在子项中移动聚焦。现存技术的痛点在于，这需要开发者编写 JS 手动管理 tabindex。

focusgroup.gif

目前，不同大厂的 UI 库反复造轮子，各自攻克最后焦点记忆、忽略禁用项、动态子项等技术难关。

为此，微软发明了 focusgroup 新特性，联手谷歌和 OpenUI 迭代这个“后 HTML5 时代“的新功能。

focusgroup 目前处于实测阶段，它可以为 tablist / menu 等复合部件添加键盘方向键导航功能，这是一种更符合人体工程学的纯 HTML 声明式魔法，可以消灭 JS “代码屎山“，简化无障碍开发。

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">👍</button>
  <button type="button">⭐</button>
  <button type="button">❤️</button>
</div>

现在，谷歌和微软诚邀大家测评 focusgroup，它们将根据大家的测评反馈继续完善这项新技术。

🚦 版本更新

Lightning CSS v1.32

Lightning CSS 是一个用 Rust 编写的 CSS 解析器 & 压缩神器，被 GitHub 第一 构建工具 Vite 采用，速度比用 JS 编写的同款工具快 100x 倍。

rank.gif

Lighting CSS 发布了 v1.32 次版本：

  • 支持解析器标记 @import 为外部导入，不会被打包
  • 允许访问者添加依赖，实现文件监视或缓存
  • 支持 CSS mix-blend-mode 新属性

Electron v41.0

Electron 是 GitHub 第一 跨平台桌面应用框架，地表最强 IDE VSCode 就是用它写的。

Electron 发布了 v41 主版本，主要包括：

  • 新增了 MacOS 应用新功能，比如支持嵌入 ASAR 完整性摘要，提升安全性；新增 --disable-geolocation flag，禁用定位服务等
  • 技术栈升级，Chromium 升级到 146.0.7680.65，Node 升级到 24.14
  • 支持通过 login 事件，实现 WebSocket 认证

reveal v6.0

reveal 是 GitHub 第一 HTML 幻灯片框架，允许我们使用 Markdown + Web 技术栈来写 PPT。

reveal 发布了 v6.0 主版本，主要包括：

  • 使用 Vite 替代 Gulp 作为构建工具
  • TypeScript 类型开箱即用，无需安装类型开发依赖
  • 新增 @revealjs/react 模块，支持使用 React 组件制作 PPT

Astro v6.0

Astro 是 GitHub 第三 的全栈框架或通用 SSG（静态站点生成器），它允许我们在一个框架中编写所有主流前端框架的组件，包括 React / Vue / Svelte 等。

Astro 发布了 v6.0 主版本，主要包括：

  • 重写 astro dev，借助 Vite Environment API，开发服务器可以跑在非 Node 的生产运行时，包括 Cloudflare Workers，Bun 等，统一开发体验和生产环境
  • 新增 Fonts API，支持从本地文件或谷歌等供应商配置字体
  • 实时内容合集稳定，在请求时获取内容，发布后立即更新，无需重建
  • 内容安全策略 API 稳定
  • 实验性支持基于 Rust 的新编译器，未来有望取代基于 Go 的编译器；顺便一提，React 也爆料将上线基于 Rust 的 React Compiler

Prisma v7.5

Prisma 是 GitHub 第一 NodeJS ORM（对象关系映射），发布了 v7.5 次版本，支持 SQL 数据库的嵌套事务回滚行为，如果外部事务失败，内部嵌套事务也会回滚。

另外，Prisma 官网重做了。

docs.png

Preact v10.29

Preact 是拥抱 DOM 规范的 React 替代品，发布了 v10.29 次版本，实现了 flushSync。

💡 前端信息差

Next 升级后遗症

去年，Next 爆出核弹级安全漏洞后，就鼓励用户赶快升级 fix bug 嘛。

结果嘞，部分用户反馈升级到 Next v16 后，请求跟延迟反而增加了。

image.png

由于 Vercel 是按请求收费，请求增加后，成本也会递增，导致经费增长、性能负增长的“消费降级“现象......

因此，部分用户选择回退到了 Next v15，部分用户被退回了 25% 的平台费用。

今年二月底，Next 团队终于找到“万恶之源“，这似乎与预请求有关，并且已经合并了实验性补丁 prefetchInlining flag。

// next.config.js
module.exports = {
  experimental: {
    prefetchInlining: true,
  },
};

如果你升级到 Next v16 后发现成本增长，但性能反而负增长，可以参考这个 GitHub issue，重新制定技术方案。

Fastify 之父分享 Skills

最近 AI 编程中 Skills 的应用挺火的，很多大神纷纷分享自己的 Skills。

Fastify 之父也是 Node 核心贡献者，也分享了自己的 Skills：

  • Node 最佳实践，事件循环和异步错误处理等
  • TypeScript 高级类型系统和 any 消除等
  • ESLint v9 扁平化配置等

最近 Node 开发圈爆发了抵制 AI 提交 Node 源码和开源贡献的反 AI 运动，但目前适当使用 AI 辅助编程还是可行的。

🛠️ 工具推荐

npmx：现代化 npm 注册搜索源

npmx 是一个类似 npm 官网的现代搜索源，旨在优化 npm 官网的设计和开发体验。

npmx 目前处于 Alpha 阶段，我替大家进行了人体试验，目前感觉良好。

首先，npmx 支持更机智的模糊搜索算法，比如搜索“Vite JS“，npm 会搜索出不准确的结果；而 npmx 即便输入的模块名不完全匹配，也能智能搜索出目标模块。

npmx 还支持模块 PK 跑分，帮助开发者挑选模块，比如这是 Vite vs webpack 的“对照实验“。

npmx-pk.png

UI 和无障碍方面，现代化的 npmx 支持深浅模式和自定义主题等。

此外，npmx 支持在线查看模块打包后的源码，不需要我们自己去 GitHub 下载源码打包。

数据可视化方面，我们还可以在线免费下载统计图表，比如本文的这张 Vite vs webpack 的本月下载量。npmx 还支持编辑标注截图，用来发帖或写博客都挺高效的。

npmx-chart.png

npmx 项目由 Nuxt 团队主席提出，团队成员包括 antfu 等前端大神。npmx 采用 VoidZero 和 Vite+ 全家桶构建，提供了更现代化的 UI 设计跟更棒的开发体验，还有更多隐藏功能，欢迎大家测评体验，真的超好用。

🙏 特别鸣谢

以上就是本期《Web 周刊》的全部内容了。

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

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

cat-thank.gif

avatar
文章
阅读
粉丝