呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #前端 #CSS #浏览器 #新动态
New in Chrome 143
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Rachel Andrew
New in Chrome 143
AI 摘要:Chrome 143 正式发布,本次更新带来了对锚点定位元素(anchor positioned elements)的新式容器查询(anchored fallback container queries),改进了背景图像定位语法(side-relative background-position),并新增对 font-language-override 的支持,使开发者可精确控制字体替代语言标签。在提高 CSS 表现力的同时,也强化了排版的一致性与多语言支持。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. CSS 新特性
• Anchored fallback container queries:新增 @container anchored(fallback),可基于元素定位的备用状态(position-try-fallbacks)设置不同样式,用于调整锚点元素的连线或动画表现。
• Side-relative background positioning:现在可在 background-position-x/y 长属性中直接使用相对边位置语法(如 left 30px、bottom 20px),提高图像定位灵活性,该特性现已进入 Baseline 新可用级别。
• Font language override:新增 font-language-override 属性,允许为 OpenType 字形替换指定自定义四字语言代码,从而覆盖系统语言设置,便于实现多语言、特殊字体排版控制。
2. 版本信息与资源链接
• 详细更新内容见 Chrome 143 release notes。
• 开发者工具更新详情:What's new in Chrome DevTools (143)。
• 功能状态更新在 ChromeStatus.com。
• Chrome release calendar 提供未来版本发布时间表。
3. 社区与后续更新
• 推荐订阅 Chrome Developers YouTube channel 获取最新视频提示。
• 关注 Chrome 团队在 X 或 LinkedIn 的最新发布。
• 官方将于 Chrome 144 发布时继续更新新功能说明。
author Rachel Andrew
#优质博文 #前端 #AI #工程化 #bun #新动态
Bun 被 Anthropic 收购。
Bun is joining Anthropic
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Jarred Sumner
Bun 被 Anthropic 收购。
Bun is joining Anthropic
AI 摘要:Bun 宣布被 Anthropic 收购,将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。Bun 保持开源与 MIT 许可证,团队与路线图不变,继续专注于高性能 JavaScript 工具和 Node.js 兼容性建设。此次加入为 Bun 带来长期稳定性与更充足资源,也让团队处于 AI 编码革命的前线,加速产品迭代,助力 AI 驱动的开发模式未来。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 加入 Anthropic 的背景与不变之处
• Anthropic 收购 Bun,旨在让其成为 Claude Code 与未来 AI 编程工具的运行基础。
• Bun 将继续开源(MIT 许可)、在 GitHub 公开开发,保持原团队管理与代码维护。
• 路线图不变,持续聚焦高性能 JavaScript 工具与 Node.js 替代能力。
2. 与 Anthropic 合作后的变化
• 更紧密参与 Claude Code 与 Claude Agent SDK 的性能优化,让工具更快更轻。
• 获得 AI 工具一手开发动态,Bun 能优先适配未来 AI 编程需求。
• 加速发布周期,强化生态深度。
3. Bun 的起源与演进
• 起点是开发浏览器 voxel 游戏时的性能瓶颈,促生对编译与运行时系统的探索。
• 从 esbuild 移植 JSX/TypeScript 编译器到 Zig,用 JavaScriptCore 构建自有运行时。
• 2022 年发布 Bun v0.1,集打包器、编译器、运行时、测试与包管理于一体。
• 后续版本:
• v1.0(2023 年)正式稳定,融资并扩张团队;
• v1.1 补齐 Windows 支持;
• v1.2 强化 Node.js 兼容与扩展数据库客户端;
• v1.3 加入前端开发服务器、Redis/MySQL 驱动,生产应用激增。
4. AI 编码工具的崛起与契合
• 2024 年后 AI 编码工具突飞猛进,Bun 的单文件可执行特性非常适合 CLI 与 Agent 分发。
• Claude Code、FactoryAI、OpenCode 等关键 AI 工具均基于 Bun。
• 团队自用 Claude Code 实现自动提交与错误修复,提升开发效率。
5. 可持续性与发展方向
• Bun 至今无直接营收,原计划构建云产品,但 AI 生态发展已重塑商业逻辑。
• 加入 Anthropic 避免了 VC 变现压力,转而获得长期稳定支持与核心地位。
• 与其在未来 AI 开发趋势之外摸索,不如进入中心参与制定。
6. 未来展望与愿景
• 目标成为 AI 时代的标准运行时,让 Bun 承载“AI 驱动软件开发”的基础层。
• Anthropic 为其提供长期资源、战略支持与招聘扩展。
• 持续对社区开放、保持 Node.js 兼容、加速工具链性能提升。
• 预期形态类似「Claude Code <> Bun」关系,类比于「Chrome <> V8」等组合。
author Jarred Sumner
#优质博文 #webgpu #前端 #浏览器 #新动态
WebGPU 现在也是全面支持了,但是 Safari 是 iOS 26 才支持,而且 Safari 移动端给的显存嘛……少少的。
WebGPU is now supported in major browsers
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author François Beaufort
WebGPU 现在也是全面支持了,但是 Safari 是 iOS 26 才支持,而且 Safari 移动端给的显存嘛……少少的。
WebGPU is now supported in major browsers
AI 摘要:文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持,这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL,更在性能与设计层面跃升,支持现代 GPU 功能、Compute Pipeline(通用计算管线)和 Render Bundles(渲染指令集复用)等特性,为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度,包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持,并感谢各大公司与开发者的多年协作。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者,提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言(Shader Language)。
• 支持 Compute Pipeline,让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令,提高性能、降低 CPU 开销。
• 示例:Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。
2. 浏览器与系统支持现状
• Chrome / Edge:在 Windows(Direct3D 12)、macOS、ChromeOS 自 v113 起支持;Android 自 v121 起支持。
• Firefox:Windows 自 v141 起支持,macOS ARM64 自 v145 起支持。
• Safari:在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中,可查看 Implementation Status。
3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU,包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用,方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具,可将原生 GPU 应用移植至 Web。
4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者,包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。
author François Beaufort
#React #CSS #前端 #组件库 #新动态
Ant Design 6.0 来了!
[以下是方便搜索索引的大纲(AI 生成),请读原文]
Ant Design 6.0 来了!
AI 摘要:Ant Design v6 正式发布,以技术升级和未来兼容性为核心,全面支持 React 18+,引入纯 CSS Variables 模式、全量组件语义化结构,并新增 Masonry、可拖拽 Drawer、模糊蒙版等实用功能。此次升级保持对 v5 的完全兼容,带来更轻盈的打包体积与更灵活的定制体验。Ant Design X 也同步发布 2.0,聚焦 AI 场景的 UI 体验,预示着生态的又一次跃进。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 版本背景与发布说明
• Ant Design 自开源以来积累超 96K Star、2K+ 贡献者,社区生态庞大。
• v6 聚焦技术优化与未来 React 版本兼容,标志进入新阶段。
• 与 v5 之间为平滑迁移,v5 进入一年维护周期。
2. 技术升级与核心变化
• React 版本提升:最低要求 React 18,推荐使用 React 19,移除旧版兼容逻辑。
• 启用 React Compiler:在构建产物中优化性能,开发者可自行选择是否开启。
• 纯 CSS Variables 样式架构:全面弃用 IE 兼容逻辑,样式实现零运行时(zeroRuntime)模式,支持实时多主题切换。
• 组件语义化结构:所有组件 DOM 结构优化,支持函数式类名配置 (classNames) 与内联样式 (styles),提升定制能力与可维护性。
• 移除废弃 API:彻底移除 v4 遗留逻辑,统一 API 命名,同时兼容 v5 的使用方式。
3. 新组件与功能增强
• Masonry 瀑布流组件:优化图片展示与卡片排布体验。
• Tooltip 支持平移切换:多内容提示实现滑动过渡。
• InputNumber spinner 模式:交互式加减按钮布局更直观。
• Drawer 支持拖拽:用户可调整抽屉大小。
• 模糊蒙版背景:所有弹层默认使用模糊特效,可按需关闭。
4. 升级指南
• v6 可直接从 v5 升级,无需 codemod 或兼容包。
• 项目需运行在 React 18+ 环境。
• 不再支持 IE,建议替换废弃 API。
5. 未来计划
• 聚焦移动端交互体验与可访问性(Accessibility)增强。
• 跟进 React 新特性,持续优化性能。
• 持续推出新组件,拓展生态边界。
6. One More Thing —— Ant Design X 2.0
• 面向 AI 场景的组件库同步升级,提供更智能的交互能力。
• 新版本强化渲染性能与灵活性,是探索 AI 驱动界面的关键工具。
• 更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。
7. 致谢
• 官方感谢 2000+ 贡献者的支持与共创。
• 十年开源历程,秉持「因为你们的参与,开源才美好」的初心。
#前端 #react #新动态
React 2025 年现状调查:React 生态系统年度调查又开始了。提交截止日期为 11 月 25 日,也就是下周二。感兴趣的可以在这里查看 2024 年的调查结果
这种调查的填写过程中其实能学到不少东西。类似之前的 JS / CSS 的年度调查
React 2025 年现状调查:React 生态系统年度调查又开始了。提交截止日期为 11 月 25 日,也就是下周二。感兴趣的可以在这里查看 2024 年的调查结果
这种调查的填写过程中其实能学到不少东西。类似之前的 JS / CSS 的年度调查
#优质博文 #git #开源 #性能优化 #rust #版本管理 #新动态
锈化!都给我锈化!
Highlights from Git 2.52
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Taylor Blau
锈化!都给我锈化!
Highlights from Git 2.52
AI 摘要:Git 2.52 是一次重要更新,带来了全新的 git last-modified 命令,大幅提升了目录级变更追踪性能。改进了 git maintenance 的几何级(geometric)打包策略,使大型仓库的维护更高效。除此之外,还新增了 git repo 命令用于仓库信息查询,引入 Rust 代码优化内部实现,并为 Git 3.0 的默认分支名更改(从 master 到 main)和 SHA-256 过渡打下基础。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. Tree-level 责任追踪
• 新增 git last-modified 命令,用于快速查询目录中每个文件最后一次被修改的提交。
• 相比传统 git log + 脚本方式速度提升约 5 倍以上。
• 功能源自 GitHub 内部工具 blame-tree,现上游化至 Git 主干。
• 支持未来改进,比如结果缓存的磁盘格式。
2. 高级仓库维护策略
• git maintenance 命令新增 geometric 任务,实现高效打包与逐步清理策略。
• 该模式基于几何打包(geometric repack),在性能和空间之间取得平衡。
• 相关技术源自 GitHub 自用工具,从 Git 2.33 起逐步完善。
3. 其他核心更新与实验功能
• 新增 git refs list 与 git refs exists 子命令,统一引用(reference)操作接口。
• 全新实验命令 git repo,整合查询仓库结构、对象与格式信息的能力。
• 性能显著提升:git describe、git log -L、git ls-files 等命令获优化。
• Bloom filter 算法改进,支持更复杂的路径匹配(pathspec)。
4. 迈向 Git 3.0 的过渡性变更
• 默认分支配置 init.defaultBranch 将在 3.0 版改为 “main”。
• 引入 SHA-256 作为对象哈希算法的未来默认值,兼容 SHA-1 环境。
• 开放 WITH_BREAKING_CHANGES 构建标志,提前体验 3.0 功能。
5. Rust 支持与内部重构
• 可选启用 WITH_RUST 编译选项,部分内部功能迁移至 Rust 实现。
• 当前用于变量宽度整数 (variable-width integers) 编码/解码。
• 为未来更多核心模块迁移铺路,Git 3.0 将全面要求 Rust。
6. 细节改进与工具增强
• sparse-checkout 新增 clean 子命令,便于清理异常文件状态。
• 多处底层库(特别是 xdiff)获得性能优化补丁。
• 跨工具一致性与脚本可编程性进一步提升。
author Taylor Blau
#优质博文 #npm #安全 #新动态
跟我说,安全,安全,还 xx 的是安全!(x)
npm security update: Classic token creation disabled and granular token changes
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author GitHub Changelog Team
跟我说,安全,安全,还 xx 的是安全!(x)
npm security update: Classic token creation disabled and granular token changes
AI 摘要:自 2025 年 11 月 5 日起,npm 将正式禁用新建经典 (classic) token,并强化细化 (granular) token 的安全策略,包括强制启用双重验证 (2FA) 及限定有效期为 90 天。现存的经典 token 将在 11 月 19 日彻底失效,用户需尽快迁移至新的 granular 权限模型。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 更新背景与总体说明
• 本次更新是 npm 提升安全策略的重要阶段,意在统一令牌 (token) 管理机制。
• 仅 npm 注册表使用的 token 受影响,GitHub 自身的 token 不受波及。
2. 主要变更:经典 token 停用
• 自 2025 年 11 月 5 日起,无法通过网站、CLI 或 API 再创建 classic token。
• 现有 classic token 可继续使用至 11 月 19 日,之后将全部失效。
• npm token create 不再生成 classic token。
3. granular token 改进措施
• 新建具有写权限的 npm granular token 默认强制要求启用 2FA。
• 针对 CI/CD,可设置 “Bypass 2FA” 选项(默认关闭)。
• 所有具写权限的 granular token 有效期上限调整为为 90 天,原定于 2026 年 2 月 3 日之后到期的现有 token 已调整为在该日期到期。
4. 用户应对与迁移步骤
• 用户须在截止日前迁移 classic token 至 granular token。
• 迁移流程需通过 npm 账户设置页面 完成,选择 “Generate New Token → Granular Access Token”。
• 依工作流需求配置权限,CI/CD 可启用 Bypass 2FA 或使用 OIDC。
• 目前 granular token 仅可通过网站生成,CLI 支持将在后续添加。
5. granular token 用户的注意事项
• 定期检查 token 过期时间并规划轮换 (rotation)。
• 对非交互式发布需求,可能需启用 Bypass 2FA。
6. 不受影响的范围
• GitHub classic 个人访问 token、fine-grained 个人访问 token、GitHub Actions secret 以及 GITHUB_TOKEN 均无须变更。
• 但若内含 npm 凭证,应相应更新。
7. 接下来的关键节点:2025 年 11 月 19 日
• npm 将彻底吊销 classic token,并引入 2 小时有效的动态 session token 取代长期本地发布凭证。
8. 支持与参考资源
• npm token migration guide 提供迁移指引。
author GitHub Changelog Team
#优质博文 #前端 #AI #新动态
Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1:2025 年 GitHub 的年度报告,比较有意思,摘了其中几个点看看:
1. GitHub 总用户达 1.8 亿,年增 3600 万,创下历史最高增长率。每秒新增 1 名开发者,印度贡献 500 万以上新用户,占全球新增 14%。
2. 生成式人工智能如今已成为开发中的标准配置。超过 110 万个公共代码库正在使用 LLM SDK,其中仅过去 12 个月就新增了 693,867 个项目(同比增长 178%)。开发者们还合并了创纪录的 5.187 亿个拉取请求(同比增长 29%),80% 的新开发者在第一周就开始使用 Copilot。
3. TypeScript 首次成为 GitHub 最常用语言,超越 Python 和 JavaScript。即便如此,Python 在人工智能和数据科学工作负载方面仍然占据主导地位,而 JavaScript/TypeScript 生态系统的整体活跃度仍然高于 Python 本身。
4. 总计 3.95 亿个公共存储库托管了 11.2 亿次贡献和 5.187 亿次合并拉取请求。
还有很多很多数据,感兴趣的建议阅读原文。
Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1:2025 年 GitHub 的年度报告,比较有意思,摘了其中几个点看看:
1. GitHub 总用户达 1.8 亿,年增 3600 万,创下历史最高增长率。每秒新增 1 名开发者,印度贡献 500 万以上新用户,占全球新增 14%。
2. 生成式人工智能如今已成为开发中的标准配置。超过 110 万个公共代码库正在使用 LLM SDK,其中仅过去 12 个月就新增了 693,867 个项目(同比增长 178%)。开发者们还合并了创纪录的 5.187 亿个拉取请求(同比增长 29%),80% 的新开发者在第一周就开始使用 Copilot。
3. TypeScript 首次成为 GitHub 最常用语言,超越 Python 和 JavaScript。即便如此,Python 在人工智能和数据科学工作负载方面仍然占据主导地位,而 JavaScript/TypeScript 生态系统的整体活跃度仍然高于 Python 本身。
4. 总计 3.95 亿个公共存储库托管了 11.2 亿次贡献和 5.187 亿次合并拉取请求。
还有很多很多数据,感兴趣的建议阅读原文。
#优质博文 #前端 #CSS #新动态 #浏览器
New in Chrome 142
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
author Rachel Andrew
New in Chrome 142
AI 摘要:Chrome 142 引入了多项前端开发相关的新特性,包括用于滚动标记的 :target-before 与 :target-after 伪类、支持比较运算符的 CSS 样式容器查询 (style container queries) 与 if() 函数的范围语法 (range syntax),以及可用于交互触发的 interestfor 属性。
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
1. 样式与选择器增强
• 新增 :target-before 和 :target-after 伪类,用于精确匹配滚动标记上下文中的前后状态,实现滚动位置的更直观样式反馈。
• 该伪类配合 :target-current 共同用于管理同组滚动标记的状态,可根据文档平面树 (flat tree order) 定义前后关系。
2. CSS 条件查询能力升级
• 样式容器查询与 if() 函数新增范围语法 (range syntax),支持通过比较运算符(如 >、<)判断数值型样式变量。
• 可在样式级别进行动态比较,包括自定义属性、文字值 (literal) 与替代函数值 (attr()、env() 等),前提是比较双方需为同一数据类型,如 <length>、<number>、<percentage> 等。
• 提供灵活的 CSS 逻辑表达方式,例如根据容器宽度或自定义属性值动态切换样式。
3. 新的用户交互机制:Interest Invokers
• 新增 interestfor 属性,可在 <button> 与 <a> 元素上声明“兴趣触发”行为。
• 用户通过长按、悬停或特殊快捷键表现出“兴趣”时,浏览器将触发目标元素的 InterestEvent,默认动作可显示或隐藏弹出层 (popover)。
• 为交互式组件提供无需脚本的原生事件机制,提高用户体验与无障碍交互能力。
4. 延伸阅读与订阅
• 文章并列出扩展资源,包括 Chrome 142 Release Notes、DevTools 更新、ChromeStatus、Release calendar 等。
• 鼓励开发者通过 YouTube、X、LinkedIn 等渠道订阅 Chrome Developers 更新,以持续获取版本迭代信息。
author Rachel Andrew
#优质博文 #测试 #前端 #工程化 #新动态
Announcing Vitest 4.0:Vitest 团队宣布推出 Vitest 4.0,这是该测试框架的重大版本更新。此次版本将 Browser Mode 标记为稳定,让开发者能在真实浏览器环境中运行单元测试,从而获得更高的可靠性。此外还引入了 视觉回归测试 与 Playwright Trace 支持,提升了调试与测试体验。
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
Announcing Vitest 4.0:Vitest 团队宣布推出 Vitest 4.0,这是该测试框架的重大版本更新。此次版本将 Browser Mode 标记为稳定,让开发者能在真实浏览器环境中运行单元测试,从而获得更高的可靠性。此外还引入了 视觉回归测试 与 Playwright Trace 支持,提升了调试与测试体验。
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
1. 发布概况
• Vitest 在过去一年内从每周 700 万下载增长至 1700 万,社区影响力显著提升。
• 经过近一年的开发,Vitest 4.0 正式发布。
• 该版本包含若干重大变更(breaking changes),需参考迁移指南进行升级适配。
2. Browser Mode 稳定
• Browser Mode 结束 Beta 阶段,正式进入稳定版。
• 支持在真实浏览器中运行组件测试,不再局限于 JSDOM 等模拟环境。
• 使用相同的 Vitest API,无需修改测试代码。
• 基于 Playwright 等 provider 实现执行环境,但不替代现有 E2E 工具,仅改变测试运行方式。
3. 新增功能与改进
• 视觉回归测试 (Visual Regression Test):在 Browser Mode 下进行组件截图与参考图对比,用于检测视觉变化。
• Playwright Traces:生成可在 Trace Viewer 中分析的跟踪文件,辅助调试。
• 报告系统 (reporter) 更新、类型感知钩子 (type-aware hooks) 等多项改进。
4. 版本变更与迁移
• 此次为主版本升级,包含不兼容改动。
• 官方提供迁移指南:Migration guide。
5. 未来计划与社区
• 团队将重点优化性能和 Browser Mode 体验。
• 报告问题可通过 GitHub Issues 提交。
#优质博文 #前端 #新动态
Next.js 16:Next.js 16 发布,此次更新让 Turbopack 成为默认打包器,React Compiler 支持正式稳定,并且引入了全新的 Cache Components、Next.js Devtools MCP,统一代理文件 proxy.ts 取代 middleware.ts。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
Next.js 16:Next.js 16 发布,此次更新让 Turbopack 成为默认打包器,React Compiler 支持正式稳定,并且引入了全新的 Cache Components、Next.js Devtools MCP,统一代理文件 proxy.ts 取代 middleware.ts。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 核心特性与架构升级
• 引入 Cache Components:基于“use cache” 指令的显式缓存机制,结合 PPR(Partial Pre-Rendering)完成静态与动态渲染的统一。
• 改进的缓存 API:新增 updateTag()、refresh(),更新 revalidateTag() 支持 cacheLife 配置,提升对缓存生命周期与数据一致性的控制。
• 增强路由系统:通过布局去重(layout deduplication)与增量预取(incremental prefetching)减少重复下载与数据冗余。
• 新的代理机制 proxy.ts:中间件(middleware.ts)演进为 proxy.ts,使网络边界清晰可见,并支持 Node.js 运行时。
2. 开发体验(DX)与工具改进
• Next.js Devtools MCP:集成 Model Context Protocol,支持 AI 调试代理,可透视应用路由、缓存与日志。
• 日志系统优化:构建与运行阶段的耗时分析细化,日志结构更清晰。
• Turbopack 默认启用:替代 Webpack,提供最高 10 倍快速刷新与 2–5 倍构建速度提升,支持文件系统缓存(File System Caching)。
• create-next-app 简化:模板默认启用 TypeScript、App Router、Tailwind CSS、ESLint,降低项目启动门槛。
3. React 与构建链支持
• React Compiler 支持:稳定集成 React Compiler 自动记忆化能力,减少不必要的重新渲染。
• React 19.2:支持新特性 View Transitions、useEffectEvent()、<Activity /> 等,即时交互体验优化。
• Build Adapters API(alpha):允许自定义构建适配器,实现部署平台与构建流程的联动。
4. 行为变更与重大调整
• 异步访问要求:params、cookies()、headers() 等需 await 调用。
• Node.js 20.9+、TypeScript 5+ 成为最低版本要求。
• Turbopack 成为全局默认打包器;middleware.ts 弃用,重命名为 proxy.ts。
• 图片策略更新:默认缓存时长延长、质量设置调整、新安全策略限制本地 IP 优化。
• 部分配置项(如 AMP、next lint、runtimeConfig)彻底移除或转为环境变量管理。
5. 性能与生态
• Node.js 原生 TypeScript 支持:新增 --experimental-next-config-strip-types。
• Dev/Build 输出目录分离,实现并行构建。
• 引入锁文件防止多实例冲突。
• 进一步提升 next dev / next start 命令性能。
#优质博文 #AI #浏览器 #ChatGPT #新动态
有人体验过了不,发的有点晚了,不过为 Codex 买的 ChatGPT Plus 好像又有点用了。
(没有说 Codex 不好的意思——只是 gpt 现在比较少用网页版都是用 api 了)
Introducing ChatGPT Atlas
有人体验过了不,发的有点晚了,不过为 Codex 买的 ChatGPT Plus 好像又有点用了。
(没有说 Codex 不好的意思——只是 gpt 现在比较少用网页版都是用 api 了)
Introducing ChatGPT Atlas
AI 摘要:ChatGPT Atlas 是 OpenAI 推出的智能浏览器,将 ChatGPT 深度整合进网页使用场景,使 AI 能理解网页内容、保留浏览记忆、自动执行任务。用户在浏览时可直接与 ChatGPT 对话、分析网页或完成操作,无需切换应用。它支持可控的记忆功能(memory)、智能代理模式(agent mode)、隐私与家长管理等,旨在打造一个安全且高效的网页工作助手。目前支持 macOS,Windows 与移动版即将推出。
#优质博文 #vite #工程化 #前端 #开源 #新动态
VueConf 上说的 Vite+,介绍文章也来了(
Announcing Vite+
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Evan You
VueConf 上说的 Vite+,介绍文章也来了(
Announcing Vite+
AI 摘要:Vite+ 是在 ViteConf 上发布的全新统一工具链(unified toolchain),旨在整合构建、测试、格式化、代码规范检查和库打包等开发环节,解决 JavaScript 工具碎片化与性能瓶颈问题。它在 Vite 基础上新增 vite new、vite test、vite lint、vite fmt、vite lib、vite run、vite ui 等命令,并基于 Rust 实现完整编译链以实现极致性能。Vite+ 将采用 “source-available” 的商业许可策略,对个人及开源用户免费,对企业采取付费订阅模型,目标是构建可持续的前端生态。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. Vite+ 简介
• 来源于 Vite,同样可从 npm 安装;作为简体升级版,整合更多开发命令。
• 目标是提供统一的前端工程体验,使复杂项目的开发、测试与构建更加高效。
• 与 React、Vue、SvelteKit 等框架无缝兼容,并可直接用于单体或 monorepo。
2. 核心特性与命令集
• vite new:生成新项目或为 monorepo 生成代码模块。
• vite test:由 Vitest 驱动,兼容 Jest API,支持浏览器测试、分片和可视化回归测试。
• vite lint:集成 Oxlint,支持类型感知检查,性能比 ESLint 快百倍。
• vite fmt:即将发布的 Oxfmt 格式化工具,兼容 Prettier,提供更多换行与格式控制能力。
• vite lib:用于构建库,集成 tsdown 与 Rolldown,自动生成类型声明。
• vite run:智能缓存的任务执行器,无需显式配置即可获得细粒度缓存。
• vite ui:图形化开发工具,展示模块解析、打包与摇树分析等信息。
3. Rust 驱动的底层实现与性能优化
• 全链路由 Rust 重构实现,包括 parser、resolver、transformer、minifier、bundler。
• 高度性能调优,并被 Framer、Linear、Atlassian、Shopify 等公司采用。
• 暴露 parse 和 transform API,便于二次开发。
4. 解决的问题:JavaScript 工具生态的碎片化
• 多项目多团队导致依赖不一致、安全审核复杂与工具迁移成本高。
• Vite+ 旨在提供统一、协同的工具基础架构,减少配置、调试与迁移成本。
• 通过一致的命令与生态整合,提升开发协作效率。
5. 商业化与开源策略
• 将采用 “source-available” 策略:个人、开源、小型团队免费使用;企业需订阅授权。
• 收费部分将反哺 Vite+ 及其基础开源项目(Vite、Vitest、Rolldown、Oxc)。
• 承诺上述基础项目始终保持 MIT 开源许可。
• 目标是在维持社区信任与生态创新的前提下,探索开源项目的可持续商业模式。
6. 计划与参与方式
• 预计 2026 年推出公开预览版。
• 招募早期试用用户,可访问 viteplus.dev 参与测试。
• 官方希望社区共同塑造 Vite+ 的发展方向。
author Evan You
#优质博文 #React #性能优化 #前端 #工程化 #新动态
React Compiler 1.0 来辣!(虽然是 10.7 的消息但是我真的很忙才看到)
不过想尝鲜的应该早用上了()
React Compiler v1.0 – React
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Lauren Tan, Joe Savona, Mofei Zhang
React Compiler 1.0 来辣!(虽然是 10.7 的消息但是我真的很忙才看到)
不过想尝鲜的应该早用上了()
React Compiler v1.0 – React
AI 摘要:React 团队发布 React Compiler 1.0,这是一个稳定且可在生产环境中使用的构建时优化工具。它可自动分析 React 组件与 hooks 的数据流与可变性,实现自动记忆化,从而减少渲染次数并提升性能。该编译器适用于 React 与 React Native,与 Babel、Vite、Next.js、Expo 等生态紧密集成,并提供增量迁移指南和内置 lint 规则以强化 “Rules of React”。此次发布标志着历时近十年的工程成果落地,开启 React 新的性能优化时代。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 背景与发布概况
• React Compiler 1.0 正式发布,可在 React 与 React Native 中使用。
• 支持与 Expo、Vite、Next.js 等集成,默认在新项目中启用。
• 历经十年研发,从 Prepack 到 HIR(高阶中间表示 High-Level Intermediate Representation)的多次重构。
2. 编译器原理与功能
• React Compiler 作为构建时优化工具,在 Babel 插件阶段分析 AST(抽象语法树 Abstract Syntax Tree)。
• 通过自动记忆化优化组件与 hooks,可在条件渲染后仍实现 memoization。
• 拥有验证与诊断机制,通过数据流分析发现潜在违反 Rules of React 的代码。
• 与 eslint-plugin-react-hooks 集成,为开发者提供静态规则检测支持。
3. 安装与使用方式
• 支持 npm、pnpm、yarn 等安装方式:babel-plugin-react-compiler@latest。
• 改进了依赖分析算法,支持可选链与数组索引依赖。
• 提供 Playground 与文档供开发者测试优化效果。
4. 性能表现与生产验证
• 已在 Meta Quest Store 等大型应用投入使用。
• 实测初始加载与页面切换性能提升 12%,部分交互速度提升 2.5 倍。
• 性能提升同时保持内存中性,证明优化可靠。
5. 兼容性与 Lint 集成
• 兼容 React 17+,React 19 可直接启用编译器特性。
• ESLint 规则合并入 eslint-plugin-react-hooks@latest,替代独立插件。
• 强化了 setState、ref 等模式检测,防止渲染循环和 unsafe 渲染行为。
6. 与 useMemo / useCallback 的关系
• 默认由编译器自动进行 memoization,大多数情况下无需手动使用 useMemo/useCallback。
• 对需要精准控制依赖的场景仍建议保留或使用手动记忆化。
7. 新项目与渐进式迁移方案
• Expo SDK 54+ 默认启用编译器,Vite 与 Next.js 模板可直接启用。
• 提供渐进迁移指南,帮助旧项目分阶段集成 React Compiler。
8. swc 与构建工具支持
• 支持 Babel、Vite、Rsbuild 等构建工具,swc 插件仍在实验阶段。
• Next.js 15.3.1+ 可显著提升构建性能,Vite 通过 vite-plugin-react 启用编译器。
• 正在与 oxc 团队合作,为未来 rolldown 支持做准备。
9. 升级与版本管理建议
• 未来版本可能改变 memoization 策略,需保持端到端测试。
• 建议固定编译器版本(--save-exact)以避免意外行为变化。
• 强调遵守 Rules of React 以确保编译器优化安全有效。
author Lauren Tan, Joe Savona, Mofei Zhang
#优质博文 #react #前端 #新动态
国庆假期搬家加去医院各种因素忙的不可开交,断更好几天,突然看到这么个事儿 23333 大好事儿啊。
Introducing the React Foundation – React
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Seth Webster, Matt Carroll, Joe Savona, Sophie Alpert
国庆假期搬家加去医院各种因素忙的不可开交,断更好几天,突然看到这么个事儿 23333 大好事儿啊。
Introducing the React Foundation – React
AI 摘要:React 官方宣布将成立独立的 React Foundation,并将 React 与 React Native 从 Meta 转移至该基金会名下,以推动社区自治和生态中立化。基金会将管理基础设施、举办 React Conf、支持生态项目并发放资助。同时,React 将建立独立的技术治理结构,由社区贡献者共同制定方向,确保没有单一机构主导。此次改革标志着 React 迈入新阶段,进一步强化其作为开放社区核心技术的可持续性。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 背景与愿景
• React 诞生于 Meta,但已成长为由全球开发者共同维护的开源生态。
• 由于贡献者与公司参与度不断提升,React 超越了单一企业项目的边界。
• 成立基金会意在支持更广泛的社区、促进生态资源分配与治理独立。
2. React Foundation 的定位与结构
• 基金会将成为 React、React Native 与相关项目(如 JSX)的新家。
• 职责包括维护基础设施(GitHub、CI、商标)、组织 React Conf、资助生态项目。
• 由董事会治理,设有执行董事 Seth Webster;初始成员包括 Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion 与 Vercel。
• 目标是形成供应商中立 (vendor-neutral) 的社区运作机制。
3. 技术治理(Technical Governance)改革
• 技术方向将由实际参与 React 开发与维护的人员共同决定。
• 将建立与基金会独立的新治理结构,避免公司影响过度集中。
• 计划通过社区反馈完善方案,未来将公布具体实施细节。
4. 社区感谢与未来展望
• 官方感谢数千名开发者与企业的长期贡献。
• 认为基金会与新治理模式能确保 React 的长期稳定与活力。
• 强调这一变化是 React 成熟化与开放化的重要里程碑。
author Seth Webster, Matt Carroll, Joe Savona, Sophie Alpert
#优质博文 #AI #MCP #新动态 #开源
GitHub 推出官方 MCP Registry,统一入口快速发现和使用 MCP servers。
Meet the GitHub MCP Registry: The fastest way to discover MCP Servers
GitHub 推出官方 MCP Registry,统一入口快速发现和使用 MCP servers。
Meet the GitHub MCP Registry: The fastest way to discover MCP Servers
AI 摘要:本文介绍 GitHub 推出的 MCP Registry,旨在解决以往 MCP servers 分散、难以发现和管理的问题。通过集中托管与社区协作,开发者可以在一个统一平台上更快找到所需工具,与 GitHub Copilot、VS Code 等生态无缝集成。文章强调该平台对开放互操作标准的贡献,以及合作伙伴(如 Figma、Postman、HashiCorp、Dynatrace 等)所带来的典型应用场景,展示 MCP Registry 在推动 agentic workflows 与 AI 生态健康发展的重要性。
#优质博文 #新动态 #后端 #数据库 #ORM #Prisma #AI
Vibe Coding 给 Prisma 都整的加了个安全护栏了(草
太体贴了哥(
Release 6.15.0 · prisma/prisma
Vibe Coding 给 Prisma 都整的加了个安全护栏了(草
太体贴了哥(
Release 6.15.0 · prisma/prisma
AI 摘要:本次版本聚焦稳定性与平台适配:为可能由 AI 代理触发的破坏性命令加入安全确认护栏;统一 prisma-client 运行时选项并允许无模型 schema 生成客户端;提供与 Vercel Fluid 的连接池托管方案;宣布 Prisma Postgres Management API 达到 GA 并接入 Pipedream;为 npx create-db 新增 --json 输出;强化 Prisma Postgres 直连能力,接近 GA,同时继续提供企业级支持服务。
1. 亮点
• AI 安全护栏:CLI 识别常见 AI 代理(如 Claude Code、Gemini CLI、Qwen Code、Cursor、Aider、Replit),对 prisma migrate reset --force 等破坏性操作要求显式确认,避免 AI 自动执行不可逆数据库重建。文档
• prisma-client 运行时与 schema 灵活性:
• 运行时输入统一:node 移除改用 runtime = "nodejs";deno-deploy 移除改用 runtime = "deno";vercel 替换为 runtime = "vercel-edge";edge-light 作为 vercel-edge 的别名。
• nodejs、deno、bun 共用内部代码路径但保留独立输入值;VS Code 扩展已同步更新。
• 支持的运行时为:nodejs、deno、bun、workerd(alias cloudflare)、vercel-edge(alias edge-light)、react-native。
• 生成阶段改进:即使 schema 无模型也可用新生成器 prisma-client 成功生成客户端(与旧 prisma-client-js 一致)。文档
• 与 Vercel Fluid 协作:为解决无服务器挂起导致的连接泄漏,结合 Vercel attachDatabasePool 与 Prisma driver adapters,挂起前释放空闲连接,防止耗尽连接池;提供 pg + PrismaPg 的示例用法。Vercel 介绍 · 部署文档