建站与专题
项目接入 Umami 统计：基于 Vercel 与 Supabase 的零成本部署实践
记录使用 Vercel 托管开源 Umami 并配合 Supabase PostgreSQL 数据库的自建流程，涵盖数据库连接池配置、环境变量、自定义域名接入与 Next.js 客户端统计集成。
9 分钟
WRITING INDEX
文章索引
从一次问题的定位，到一套方案的形成。这里收录前端架构、实时协同、性能优化、边缘计算与 AI 工程实践。
按专栏连续阅读 →39 篇技术手记
2026
8 NOTES
AI 工程
搜索与内容工程
从 SEO 到 GEO：静态技术博客的可发现、可引用与 IndexNow 实践
结合本站的 Next.js、Nextra、JSON-LD、sitemap、llms.txt 与 IndexNow 发布链路，说明如何同时优化传统搜索收录和生成式搜索引用。
16 分钟
Cloudflare 优化
从 Link 响应头到 Cloudflare 103：静态博客的 Early Hints 实现
以 Next.js 静态导出、构建时 Link 映射、Nginx 响应头和 Cloudflare 为主线，完整实现并验证 HTTP 103 Early Hints。
12 分钟
Cloudflare 优化
Cloudflare 的优选 IP 优化
用 Cloudflare for SaaS、CloudflareSpeedTest 和宝塔计划任务，为同一域名下的博客入口自动选择 Cloudflare IP，并保留可回滚的源站链路。
15 分钟
AI 工程
AI 基础
实践方法
2025
27 NOTES
React 进阶
React 组件生命周期与 Effect 执行时序：Render 到 Commit 阶段解析
分析 React 父子组件在挂载、更新与卸载过程中的函数体执行、useLayoutEffect、DOM 绘制与 useEffect 清理函数的时序与常见陷阱。
8 分钟
全栈与边缘计算
边缘 WebSocket 实时协同：Deno Deploy 与 Hocuspocus
探讨在 Deno Deploy 边缘运行环境中接入 Hocuspocus (Yjs) 的 WebSocket 服务架构，包括连接鉴权、状态持久化与多节点路由权衡。
8 分钟
前端工程化
系统架构
系统架构
Jebet 敏捷项目管理平台架构设计：多租户工作区、MobX 响应式状态与 Socket.io 实时协同
梳理敏捷协作看板中 MobX 局部响应与 React Query 服务端缓存的分工，结合 Socket.io 实现多成员状态同步。
9 分钟
架构设计
LJH-Design 设计系统架构设计：从 Design Tokens、Radix UI 到 AI 辅助生成平台
梳理设计系统的分层结构：用 CSS 变量管理 Design Tokens，通过 Radix UI 与 CVA 解耦无头逻辑与视觉样式。
9 分钟
性能调优
设计平台首屏性能治理：重型依赖按需分包与编译调优
记录画板应用的性能优化实践，包括 Fabric.js 与 Tiptap 异步按需加载、SWC 包导入优化、首屏样式处理及 Core Web Vitals 实际指标对比。
9 分钟
网络与运维
CDN 边缘缓存原理与 Cloudflare Cache Rules 配置实践
梳理 CDN Anycast 路由与边缘分层缓存机制，配合 Cloudflare Cache Rules 配置静态资源与 HTML 缓存，以及 CI/CD 自动清除缓存。
8 分钟
全栈与安全
前端核心
为什么现代浏览器禁止 a 标签直接在新窗口打开 Data URL？
解析 Chromium 顶级窗口 Data URL 导航限制的安全背景，并提供 Data URL 转 Blob ObjectURL 的无损转换与内存安全释放方案。
6 分钟
性能调优
协作平台构建体积优化：ECharts 按需引入与构建分包
记录中后台平台打包体积治理过程：通过 ECharts 按需注册模块、构建期图片压缩与 Vite manualChunks 拆包策略，缩减首屏传输体积。
8 分钟
性能调优
复杂动态表单系统性能优化实战：从 Excel.js 按需隔离、Iconify 预连接到局部精准重绘
将 ExcelJS 移出首屏首包，配置外部图标域名的预连接，并通过非受控订阅解决长表单输入掉帧问题。
8 分钟
网络与 SEO
HTTP 重定向状态码选型：301、302、307 与 308 对比
对比 301、302、307 与 308 重定向状态码的语义差异，分析 POST 方法重写为 GET 的历史背景、搜索引擎权重继承机制与配置实践。
8 分钟
JavaScript 核心
为什么 Biome / ESLint 推荐用 for...of 替代 forEach？从异步文件上传的踩坑说起
深入剖析 Array.prototype.forEach 无法 await 异步回调的底层机制，对比 for...of 串行执行与 Promise.all 并发控制的最佳实践。
7 分钟
性能调优
协同笔记系统端到端性能调优：SPA 路由 404、Lighthouse 95+、Tree-shaking 与 Bundle 分包实战
记录协同笔记项目的排查与优化：配置 SPA 路由重写解决刷新 404，按需注册 highlight.js 语言包并用 lodash-es 与 manualChunks 缩减首屏体积。
9 分钟
建站与专题
基于 Next.js App Router 与 Nextra 4 构建静态博客
记录基于 Next.js App Router 与 Nextra 4 搭建个人静态博客的工程方案，包括 MDX 组件注入、Pagefind 离线检索、Sitemap 自动化生成与 Docker 多阶段构建。
9 分钟
React 进阶
TanStack Query (React Query) 架构与性能优化实战：请求去重、缓存分层与数据预取
厘清客户端 UI 状态与服务端缓存的区别，通过 QueryKey 去重、staleTime/gcTime 配置与乐观更新提升数据加载体验。
9 分钟
协同架构
基于 Tiptap + Yjs + Hocuspocus 的多人富文本协同架构实践
将 Tiptap、Yjs 与 Hocuspocus 串联起来，梳理富文本节点映射、Awareness 光标广播与 CRDT 快照入库流程。
9 分钟
前端工程化
基于 tsup 构建 TypeScript 库：双格式打包与导出配置
介绍使用 tsup 打包 TypeScript 库的配置要点，涵盖 ESM 与 CommonJS 双格式输出、.d.ts 类型生成、package.json exports 字段规范与 Monorepo 本地联动。
8 分钟
全栈开发
Next.js 接入 Hono + Zod：端到端类型安全 API 实践
探讨在 Next.js App Router 中嵌入 Hono RPC 与 Zod 校验器的方案，实现服务端入参校验、客户端类型自动推导与 React Query 数据集成。
9 分钟
AI 工程
基于 Google Gemini 多模态视觉模型的图像智能识别与结构化提取实战
将图片转换为模型可消费的 Base64 与 MIME 格式，结合 Zod 校验与 responseSchema 提取发票等结构化数据。
9 分钟
前端工程化
Markdown/MDX 渲染原理与 Nextra 选型
解析 Markdown/MDX 在 Unified 生态下的 AST 编译流程（mdast 到 hast），对比 Nextra 与 Fumadocs 等静态文档框架选型，并介绍 Pagefind 静态检索方案。
9 分钟
前端图形学
流程图自定义连线算法与吸附计算：基于 React Flow 的 SVG 自定义 Edge 渲染
从起点终点与端口朝向推导贝塞尔控制点，结合 React Flow 的 EdgeLabelRenderer 实现带交互按钮的自定义连线。
8 分钟
前端工程化
Biome 与 Git Hooks：前端提交自动校验实践
介绍基于 Biome、lint-staged 与 simple-git-hooks 的 Git 提交检查方案，实现暂存区代码检查、格式化与 Conventional Commits 提交规范约束。
8 分钟
前端图形学
Web Canvas 2D 图形库选型与性能对比
从交互手柄、场景图树、WebGL 批处理与矢量布尔运算等维度，对比 Fabric.js、Konva、Pixi.js 与 Paper.js 的选型边界。
9 分钟
协同架构
AI 工程
Google Gemini API 全栈调用指南：从 Edge 代理、流式传输（SSE）到结构化输出
通过 Hono 边缘代理统一管理 Gemini 密钥与跨域，结合 SSE 流式输出与 responseSchema 结构化约束。
9 分钟
2024
4 NOTES
全栈与边缘计算
后端部署到边缘函数的架构探索：用 Hono 构建零服务器高性能 API
对比常驻容器与 Edge Runtime 的启动与网络差异，用 Hono 构建轻量边缘 API 并梳理无状态数据库连接方案。
9 分钟
前端工程化
Monorepo 实践：pnpm Workspace 与 Turborepo
探讨前端 Monorepo 方案中 pnpm workspace 的依赖组织与 Turborepo 任务编排机制，分析依赖拓扑、增量构建缓存与跨包联调实践。
10 分钟
前端架构
基于 Zod 模式推导的声明式动态表单（AutoForm）可行性研究与架构实践
评估从 Zod Schema 自动推导表单 UI 的收益与边界，分析 fieldConfig 覆盖机制与复杂交互下的选型取舍。
9 分钟
AI 工程
DeepSeek 大模型本地私有化部署实战：从硬件选型、Ollama / LM Studio 到 WebUI 集成
从显存与 KV Cache 预算算起，对比 Ollama 与 LM Studio 的本地运行方式，并接入 OpenAI 兼容接口与 WebUI。
9 分钟