2025-第二十四周

该周报主要为各个地方内容的汇总整理

技术

使用 Async Local Storage 避免 Next.js 路由处理中的属性透传 | Nico 的博客

在 Next.js 路由处理程序中使用 Async Local Storage 避免属性传递（props drilling），类似于 React Context 但适用于 Node.js 函数。

• 🔄 Async Local Storage 可以避免在多个函数间手动传递用户对象等参数，简化代码结构。
• 🛠️ 创建 Async Local Storage 实例并封装 getUserContext 函数，确保调用时存在上下文。
• 🔗 使用 userContext.run() 包装需要访问共享数据的函数，如 getProfile 和 getTransactions。
• 🚫 如果未在 userContext.run() 块中调用函数，getUserContext 会抛出错误以防止误用。
• ⚠️ 目前缺少编译时检查 userContext.run() 是否存在的 linter 支持，未来可改进。

渐进式 JPEG：它是什么及如何提升网站性能

渐进式 JPEG 图像通过分阶段加载提升网站性能，相比基线 JPEG 能更快呈现完整画面并减少资源占用。以下是关键步骤和工具指南：

• 🔍 渐进式 JPEG 与基线 JPEG 的区别
  基线 JPEG 逐行加载（顶部到底部），而渐进式 JPEG 先显示模糊全图再逐渐清晰。

• ⚡ 渐进式 JPEG 的优势
  提升用户体验（快速预览全图）、减少带宽和磁盘占用，主流浏览器均支持（需注意旧版 IE 兼容性）。

• 🛠️ 转换步骤

  1. 分析现有图片：用 WebPageTest 检测基线 JPEG；
  2. 转换工具推荐：Optimizilla（在线压缩 + 转换）或 RIOT（Windows 端多功能优化）；
  3. 替换图片：通过文件管理器或 FTP 更新网站图片，保持同名避免技术问题。

Immaculata.dev - Node.js 中原生的 HMR（技术解析）

Node.js 中原生实现 HMR（热模块替换）的技术方案，通过模块钩子和依赖树管理实现高效的状态更新。

• 🚀 快速开发关键：最小化状态丢弃，避免全量重启，仅使变更模块及其依赖树失效。
• 🔄 传统方案缺陷：使用 node:vm 创建次级模块系统，导致逻辑重复且与原生模块隔离。
• 🛠️ 新方案核心：通过 node:module 原生钩子实现，直接操作模块加载与解析流程。
• 📂 文件树管理：FileTree 类内存缓存文件内容，监听变更并标记版本（?ver=${timestamp} 自动失效）。
• ⚡ 依赖追踪：利用模块钩子动态注册依赖关系，父模块随子模块更新自动失效。
• 💡 代码示例：

  const tree = new FileTree('src', import.meta.dirname)
  registerHooks(useTree(tree))
  tree.watch().on('filesUpdated', async () => {
    /* 模块按需重执行 */
  })
  

• 🧩 扩展应用：结合 moduleInvalidated 事件清理资源（如 Shiki 高亮库的 dispose 调用）。
• 🌟 优势总结：无冗余加载、依赖感知、内存高效，且完全基于原生 Node.js 机制。

构建 gRPC Node.js API - Honeybadger 开发者博客

构建更快、更可靠、可扩展且高效的 API 需要选择合适的框架和工具。通信协议对 API 的效能和速度有重要影响。gRPC 是一个强大的远程过程调用（RPC）框架，适用于多种环境，其高性能和低延迟特性使其成为构建 API 的热门选择。

• 🚀 gRPC 简介：由 Google 于 2015 年发布的开源 RPC 框架，使用 Protocol Buffers 作为接口定义语言，支持双向流和流量控制，适合微服务架构。
• 🔧 工作原理：客户端通过 RPC 调用远程服务器函数，抽象网络通信复杂性，使用 Protocol Buffers 序列化数据，确保高效传输和强类型。
• 📡 HTTP/2支持：利用 HTTP/2 的多路复用、流量控制和头部压缩，提升性能并降低延迟。
• 📜 Protocol Buffers：高效的数据序列化机制，通过.proto 文件定义数据结构，生成多语言代码，支持前后兼容性。
• 📚 示例项目：构建一个基于 gRPC 的书店 API，包含创建、读取、更新和删除书籍的功能。
• 🛠️ 设置 Node.js 项目：安装 Node.js 和 gRPC 依赖，创建 proto 文件定义服务结构和数据格式。
• 💻 创建服务器和客户端：服务器处理数据请求，客户端调用服务方法，演示了创建、读取、更新和删除书籍的操作。
• ⚖️ gRPC vs REST vs GraphQL：gRPC 适合高性能和微服务，REST 易于集成，GraphQL 适合复杂数据模型和客户端灵活性。
• ✔️ 优点：高性能、可扩展、强类型、多语言支持。
• ❌ 缺点：学习曲线陡峭、兼容性限制、浏览器支持有限。
• 🌍 实际应用：gRPC 适合构建微服务和分布式系统，但不完全替代 REST，需根据项目需求选择协议。

工具

HOTScript

HOTScript 是一个用于 TypeScript 类型层级的可组合函数库，提供高阶类型操作、模式匹配、数学运算等功能，支持通过函数式编程风格灵活转换类型。目前仍在开发中，API 可能存在变动。

• 🚀 核心功能 - 提供类型级高阶函数（如 Tuples.Map、Objects.MapValues）、模式匹配（Match）及数学运算（Numbers.Add 等）。
• 🔧 开发状态 - 目前为 🚧 进行中，API 可能有破坏性变更。
• 📦 安装方式 - 通过 npm 安装 HotScript 库。
• 🔄 示例场景
  • 🔢 列表转换 - 使用 Pipe 链式调用函数处理元组（如数字计算、字符串拼接等）。
  • 🧩 自定义函数 - 通过 Fn 接口定义类型级 Lambda 函数（如 Duplicate 复制元素）。
  • 🏷 对象类型转换 - 组合函数实现深层的键名转换（如蛇形命名）、属性过滤等。
  • 🌐 路由解析 - 将路径字符串解析为类型安全的结构化对象（如提取参数类型）。
  • 🎯 类型安全 DOM - 实现 querySelector 的类型安全版本（处理复杂选择器字符串）。
• 📚 API 分类
  • 🧠 核心工具 - Pipe、Call、Compose 等支持函数组合与部分应用。
  • 📋 数据结构操作 - 元组（Tuples）、对象（Objects）、联合类型（Union）的映射、过滤、合并等。
  • 🔤 字符串处理 - 分割、替换、大小写转换等（如 SnakeCase）。
  • ➕ 数学与逻辑 - 数字运算（Add、Mod）、布尔逻辑（And、Equals）。

mcp-server-chart

一个基于 TypeScript 的 MCP 服务器，支持通过 AntV 生成多种图表，并可在 Dify 等平台使用，提供 SSE/Streamable 传输协议及私有化部署选项。

• 📊 功能概述：支持 15+ 图表类型（如折线图、柱状图、词云等），生成后返回图片 URL。
• 🖥️ 桌面应用集成：提供 Mac/Windows 系统配置示例，支持 Claude、VSCode 等工具调用。
• 🌐 云端与协议：适配阿里云、ModelScope 等平台，支持 HTTP/SSE 协议传输。
• ⚙️ 运行方式：全局安装后可通过 SSE 或 Streamable 协议启动，默认端口 1122。
• 🔧 CLI 选项：自定义传输协议（stdio/sse/streamable）、端口及端点路径。

theme-toggle-effect

本文介绍了如何使用视图过渡 API（View Transitions API）实现主题切换效果，并提供了简洁的代码示例和 CSS 动画效果。

• 🌟 主题切换效果：使用视图过渡 API 轻松实现主题切换动画。
• 🛠️ 核心代码：仅需两行 JavaScript 即可触发过渡效果。
• 🎨 CSS 自定义：通过::view-transition伪元素自定义动画效果（如圆形遮罩过渡）。
• ⚡ 动画示例：提供了缩放和模糊效果的 CSS 代码片段。

Assortment/darkmodejs：网页暗色模式管理工具包

darkmodejs 是一个用于管理网页暗色模式的实用工具包，支持通过操作系统偏好自动切换主题，并提供灵活的 API 配置和清理功能。

• 🌐 功能概述：利用 matchMedia API 和 prefers-color-scheme 媒体查询，监听并响应系统暗色/亮色主题切换。
• 📱 兼容性：需操作系统支持（如 macOS 10.14+、Windows 10 等）和浏览器支持 prefers-color-scheme（详见 caniuse）。
• ⚠️ 版本注意：v2+ 弃用旧版 addListener/removeListener，改用 addEventListener/removeEventListener。
• 📦 安装：通过 npm 安装 @assortment/darkmodejs，支持 ES6 import 或 ES5 require。
• 🛠️ API 配置：
  • 提供 onChange(activeTheme, themes) 回调函数，返回当前主题（dark/light/no-preference/no-support）。
  • 支持 removeListeners() 清理监听器，适用于动态路由或组件卸载场景。
• 🎨 示例应用：结合 Emotion Theming 实现主题切换，Demo 链接。

liquid-glass-react

苹果的液态玻璃效果用于 React

eslint-plugin-fast-import

一个高性能的 ESLint 插件，具有确保正确使用导入和导出的规则。

更新

Jest 30：更快、更精简、更出色 · Jest

Jest 30 发布，带来显著性能提升、内存优化及多项新功能，同时包含部分破坏性变更和未来发展规划。

• 🚀 Jest 30 发布：重大版本更新，优化性能并减少内存占用，未来计划更频繁发布主版本。
• ⚠️ 破坏性变更：
  • 放弃对 Node 14/16/19/21的支持
  • 升级jsdom至 v26，TypeScript 最低版本要求 5.4
  • 移除部分expect别名，默认排除不可枚举对象属性
• 📊 性能提升：模块解析优化，实测某大型应用测试速度提升 37%，内存占用降低 77%。
• 🧹 全局变量清理：新增警告机制检测未清理的全局变量，未来将自动清理以提升性能。
• ✨ 新功能亮点：
  • 增强 ESM/TypeScript 支持（含.mts/.cts文件）
  • 新增expect.arrayOf数组匹配器
  • 支持using语法自动恢复 spy
  • 可配置测试重试策略（延迟或立即重试）
• 🔧 实验性 API：新增jest.unstable_unmockModule()和jest.onGenerateMock()等高级控制功能。

AI

The /llms.txt file

大型语言模型（LLMs）在处理网站信息时面临上下文窗口过小的限制，且 HTML 转纯文本效果不佳。为此，提出通过llms.txt文件和.md扩展链接提供 LLM 友好的结构化内容，兼顾人类与机器可读性。

• 🖥️ 背景问题：LLMs 处理完整网站时受限于上下文窗口，且 HTML 转换复杂低效。
• 📝 核心提案：网站添加/llms.txt文件（含项目概述和 Markdown 链接）及.md版本页面（如index.html.md）。
• 🔧 技术实现：llms.txt需包含 H1 标题、摘要、详细说明和 H2 分区的文件列表（链接 + 可选注释）。
• 🌟 应用场景：适用于开发文档、企业架构、电商政策、教育资料等，如 FastHTML 和 nbdev 项目已实践。
• 📂 文件规范：根目录放置，Markdown 格式，支持程序化解析（如llms_txt2ctx工具生成llms-ctx.txt）。
• 🤝 兼容标准：与sitemap.xml、robots.txt互补，侧重为 LLMs 提供按需的精选内容。
• 📋 示例模板：含标题、描述、文档/示例分区（可选区块标记可跳过的次要信息）。
• 🖥️ 背景问题：LLMs 处理完整网站时受限于上下文窗口，且 HTML 转换复杂低效。
• 📝 核心提案：网站添加/llms.txt文件（含项目概述和 Markdown 链接）及.md版本页面（如index.html.md）。
• 🔧 技术实现：llms.txt需包含 H1 标题、摘要、详细说明和 H2 分区的文件列表（链接 + 可选注释）。
• 🌟 应用场景：适用于开发文档、企业架构、电商政策、教育资料等，如 FastHTML 和 nbdev 项目已实践。
• 📂 文件规范：根目录放置，Markdown 格式，支持程序化解析（如llms_txt2ctx工具生成llms-ctx.txt）。
• 🤝 兼容标准：与sitemap.xml、robots.txt互补，侧重为 LLMs 提供按需的精选内容。
• 📋 示例模板：含标题、描述、文档/示例分区（可选区块标记可跳过的次要信息）。