跳到正文
原文
写代码的宝哥· 写代码的宝哥·· 2天前AI 评分22

前端周刊第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

AI 导读

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] 

UML 用例图: https://mermaid.ai/open-source/syntax/usecase.html

[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] 

源码在这: https://github.com/Jakubantalik/transitions.dev

[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