前端周刊第225期:Vite+ 1.0、EmDash 1.0、MSW 3.0、Vinext 1.0、Mermaid 12.0、DOCX 9.8、pnpm 12.8、Angular 22.2
Vite+ 1.0 发布,一条 vp 命令接管 Node 运行时、包管理器、dev server、lint、格式化、测试、构建和任务编排,配置统一写在 vite.config.ts,已有配置可用 vp migrate 迁入。
行业动态
一、Connection-Allowlist:页面能连哪些服务器,由你说了算[1]
Chrome 152 支持了一个新的响应头 Connection-Allowlist:站点可以明确告诉浏览器自己只允许连哪些服务器,其余一律拦掉。对防第三方脚本偷偷外联、防供应链投毒这类场景,算是多了一道浏览器级别的闸门。
二、2027 年,浏览器该一起修哪些特性?[2]
Interop 项目每年挑一批「各家浏览器都对齐一下」的特性。Ollie 提前把候选摊开了:Sanitizer API[3]、focusgroup[4]、grid-lanes[5] 都在他的名单里,还聊了哪些早期提案值得提前放进观察池。
三、Cloudflare 终于有了一条 CLI 管全部 API[6]
🎉 以前只有 Wrangler,覆盖的还只是子集。新出的 cf 用 TypeScript 写的,Cloudflare 所有 API 都能从这一条命令走。
四、Bun 亮出 AOT 编译预览:启动快 24%,内存省 48%[7]
Jarred Sumner 发了段演示:把 JavaScript 提前编译(AOT),Claude Code 启动快了 24%、内存少用了 48%,代价是二进制文件体积几乎要翻倍。
五、Angular 要自己写个 Rust 编译器,因为 TS7 的 Go 版缺 API[8]
TypeScript 7 的 Go 移植版没有提供 Angular 现有编译器依赖的那些 API,Angular 团队的应对方案是:自己做一个部分用 Rust 实现的编译器。
文章
一、Claude 网页版两周提速 3 倍:破折号和一次 location.reload() 的锅[9]
一次冲刺(Claude 自己干了不少活)把「可输入时间」的 p75 从 3.1 秒压到 0.55 秒。踩到的坑很杂也很有意思:破折号(对,就是这个——)把 V8 推到了更慢的正则路径;一处漏网的 location.reload() 每天造成五十万次隐形刷新;还有个 :root:has() 选择器,每次 DOM 变更都要花 24ms。
二、前端大一统架构:React、HTMX、LiveView 只是分工不同[10]
SolidJS 作者 Ryan Carniato 提出一个框架:导航、内容、即时反馈这三件事,各家方案的区别只在于把它们怎么切给客户端和服务端。顺着这个视角,他讲了 Solid 2.0[11] 想怎么把整个光谱都覆盖住。
三、GitHub 花三年干掉 CSS-in-JS,换来 SSR 快 55%[12]
把 styled-components 从 github.com 上彻底清出去,换成 CSS Modules。最终发出去的 CSS 反而更多了,但服务端渲染一页的时间少了 55%。一篇讲「多写点 CSS 更快」的完整复盘。
四、纯 CSS 判断两个元素有没有撞上[13]
一行 JavaScript 都不用:靠 anchor positioning、样式容器查询和滚动驱动动画凑出一套判定,用一个会溢出的「测量」元素当触发器。思路很取巧,值得看。
五、用 CSS 把网格结构「读」出来[14]
只有 CSS 的概念验证:拿到网格有几列几行、每个项目落在哪。实现手段居然也是滚动驱动动画。Temani Afif 的老手艺。
六、Object.create(null) 会拖慢 V8,换个写法就好[15]
在 V8 里,用 { __proto__: null } 或 Object.create(null) 造出来的对象一开始就是慢的「字典模式」。Matteo 给的解法是:先建普通对象,再把原型设成 null,快属性就保住了。
七、12 个可以替掉 npm 包的 Node 内置模块[16]
盘点 12 个能顶替常见生态包的 Node 内置能力,附各自的稳定度,以及那些可能让你继续用老包的小坑。
八、流体排版:别用容器查询算字号[17]
容器宽度本来就难预测,Donnie 认为拿容器查询驱动流体字号是选错了工具,想让排版真正可控,还是得用视口单位。
发布
一、Vite+ 1.0:一条 vp 命令接管整条工具链[18]
从 Beta 走到 1.0。vp 现在能一并管 Node 运行时(如果你想)、包管理器、dev server、lint、格式化、测试、构建和任务编排,配置统一写在 vite.config.ts 里。已有的 Vite、Vitest、ESLint、tsup 配置可以用 vp migrate[19] 迁进来。
二、EmDash 1.0:Cloudflare 的 WordPress 继任者稳定了[20]
四月首次公布,现在正式到 1.0。每个站点自带 MCP server,开箱就能让 agent 上手干活;插件也可以提交到官方 registry[21] 了。
三、MSW 3.0:改成 ESM only,还能拦表单提交了[22]
流行的接口 mock 库大版本更新:只发 ESM,加了 Vite 插件,支持 GraphQL subscription,连页面跳转和表单提交都能拦。
四、Vinext 1.0:Cloudflare 用 Vite 复刻的 Next.js,双路由都支持了[23]
Pages Router 和 App Router 现在都能跑,官方也给了已有项目的迁移路径。
五、Mermaid 12.0:默认换 ELK 布局,老图会长得不一样[24]
流程图、类图、状态图这些默认改用 ELK 布局引擎,所以已有图表的渲染效果会变——想保持原样就显式写 layout: dagre。另外新增 UML 用例图[25]。
六、Markuplint 5.0:老牌 HTML linter 的大版本[26]
这个已经做得挺成熟的标记语言 linter 发布了 5.0。仓库在这[27],想先试手感可以直接开在线 playground[28]。
七、DOCX 9.8:用 JS 生成 Word,这回有图表、形状和水印[29]
这次又是个大版本:支持图表、形状、水印,数学公式的表达能力也更强了。官网在这[30]。
八、pnpm 12.8[31] · Angular 22.2[32] · TinyBase 10[33] · QUnit 3.0[34]。
工具
一、Size Limit:给包体积和加载时间画一条 CI 红线[35]
给代码设定体积或加载时间预算,超了就让 CI 挂掉(或者在 PR 上标出来)。也支持临时跑一次看可视化报告,清楚知道字节花在哪。不挑框架、不挑打包器和 CI。
二、transitions.dev:一整套 UI 过渡动画[36]
首页一张张卡片就是一个个基于 CSS 的动效,可以直接抄进项目;整套还能装成 AI 编码工具的 agent skill。部分动效属于 Pro 付费内容,源码在这[37]。
三、soverybright:让你的 logo 比白色还亮[38]
如果你有 HDR 屏,这个网页工具一眼就能看出它在干什么:丢进 logo、选哪些颜色该发光,就能导出 HDR 版本。官方说在 Chrome 和 Safari 里最亮能到 7.5 倍。
资源
一、界面设计小抄:从圆角到配色的实操清单[39]
一份配图讲道理的 UI 建议清单,覆盖圆角、过渡、配色、缩放和无障碍这些天天要面对但总说不清的地方。
二、soundcn:800 多个音效,按 shadcn registry 装[40]
一整套 800 多个音效🔊,可以通过 shadcn registry 直接安装,能按分类浏览、鼠标悬停就试听。用之前留意每个音效各自的授权。GitHub 仓库[41]。
作者:Kapish Dima | 来源:www.soundcn.xyz
库
一、Custom Attributes 的 polyfill:给任意元素挂可复用行为[42]
Custom Attributes 提案的 polyfill。它让你能通过自定义属性给任意元素附加可复用的行为,还带自己的生命周期钩子——不用写自定义元素也能做到。
参参考链接:JavaScript Weekly#804[43] · Frontend Focus#760[44]
参考资料
[1]
Connection-Allowlist:页面能连哪些服务器,由你说了算: https://developer.chrome.com/blog/connection-allowlist-announcement
[2]
2027 年,浏览器该一起修哪些特性?: https://olliewilliams.xyz/blog/interop-and-beyond/
[3]
Sanitizer API: https://github.com/web-platform-tests/interop/issues/1336
[4]
focusgroup: https://github.com/web-platform-tests/interop/issues/1348
[5]grid-lanes: https://github.com/web-platform-tests/interop/issues/1445
[6]Cloudflare 终于有了一条 CLI 管全部 API: https://blog.cloudflare.com/cloudflare-cf-cli-launch/
[7]Bun 亮出 AOT 编译预览:启动快 24%,内存省 48%: https://x.com/jarredsumner/status/2104739495895781679
[8]Angular 要自己写个 Rust 编译器,因为 TS7 的 Go 版缺 API: https://blog.angular.dev/an-update-on-angulars-typescript-7-powered-compiler-9619a35e2b0a
[9]Claude 网页版两周提速 3 倍:破折号和一次 location.reload() 的锅: https://claude.dev/blog/how-we-made-claude-ai-faster/
[10]前端大一统架构:React、HTMX、LiveView 只是分工不同: https://dev.to/playfulprogramming/the-grand-unifying-architecture-of-frontend-bhk
[11]Solid 2.0: https://www.solidjs.com/blog/solid-2-0-rc-the-big-reveal
[12]GitHub 花三年干掉 CSS-in-JS,换来 SSR 快 55%: https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/
[13]纯 CSS 判断两个元素有没有撞上: https://ishadeed.com/article/css-detect-overlap/
[14]用 CSS 把网格结构「读」出来: https://blog.master.dev/extracting-grid-information-using-css/
[15]Object.create(null) 会拖慢 V8,换个写法就好: https://adventures.nodeland.dev/archive/optimizing-objects-with-null-prototypes/
[16]12 个可以替掉 npm 包的 Node 内置模块: https://flaviocopes.com/node-builtins/
[17]流体排版:别用容器查询算字号: https://blog.damato.design/posts/fluid-typography/
[18]Vite+ 1.0:一条 vp 命令接管整条工具链: https://voidzero.dev/posts/announcing-vite-plus-1-0
[19]vp migrate: https://viteplus.dev/guide/migrate
[20]EmDash 1.0:Cloudflare 的 WordPress 继任者稳定了: https://emdashcms.com/blog/emdash-1-0
[21]可以提交到官方 registry: https://emdashcms.com/blog/emdash-plugin-registry
[22]MSW 3.0:改成 ESM only,还能拦表单提交了: https://github.com/mswjs/msw/releases/tag/v3.0.0
[23]Vinext 1.0:Cloudflare 用 Vite 复刻的 Next.js,双路由都支持了: https://blog.cloudflare.com/vinext-nextjs-on-vite/
[24]Mermaid 12.0:默认换 ELK 布局,老图会长得不一样: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0
[25] [26]Markuplint 5.0:老牌 HTML linter 的大版本: https://markuplint.dev/
[27]仓库在这: https://github.com/markuplint/markuplint/releases/tag/v5.0.0
[28]在线 playground: https://playground.markuplint.dev/
[29]DOCX 9.8:用 JS 生成 Word,这回有图表、形状和水印: https://github.com/dolanmiu/docx/releases/tag/9.8.0
[30]官网在这: https://docx.js.org/
[31]pnpm 12.8: https://github.com/pnpm/pnpm/releases/tag/v12.8.0
[32]Angular 22.2: https://github.com/angular/angular/releases/tag/v22.2.0
[33]TinyBase 10: https://tinybase.org/guides/releases/#v10-0
[34]QUnit 3.0: https://qunitjs.com/upgrade-guide-3.x/
[35]Size Limit:给包体积和加载时间画一条 CI 红线: https://github.com/ai/size-limit
[36]transitions.dev:一整套 UI 过渡动画: https://transitions.dev/
[37] [38]soverybright:让你的 logo 比白色还亮: https://www.soverybright.com/
[39]界面设计小抄:从圆角到配色的实操清单: https://interfaces.dev/cheat-sheet
[40]soundcn:800 多个音效,按 shadcn registry 装: https://www.soundcn.xyz/
[41]GitHub 仓库: https://github.com/kapishdima/soundcn
[42]Custom Attributes 的 polyfill:给任意元素挂可复用行为: https://www.keithcirkel.co.uk/custom-attributes-polyfill/
[43]JavaScript Weekly#804: https://javascriptweekly.com/issues/804
[44]Frontend Focus#760: https://frontendfoc.us/issues/760
来源:写代码的宝哥 · mp.weixin.qq.com