在线工具网站UtlKit 技术系列

问题清单 在找到最终方案之前，我遇到了这些问题： # 问题 状态 1 React Hydration Error #418 ✅ 已解决 2 暗色模式首屏白屏闪烁 ✅ 已解决 3 Console Syn

Cloudflare Pages 缓存命中率 7%？我用 3 条规则把它干到 90% 问题发现 站点 utlkit.com 部署到 Cloudflare Pages 后，在国内访问非常慢。打开 Chr

免费监控网站性能：PageSpeed CI + CrUX + GitHub Actions 需求 网站上线后，需要持续监控 Core Web Vitals： LCP (Largest Contentf

用 Web Crypto API 做安全的客户端加密工具 为什么要纯前端加密？ 隐私 — 用户的敏感数据不应该发到任何服务器 信任 — 前端代码开源可审计，比黑盒后端可信 成本 — 零服务器成本 We

Sentry Source Map 上传踩坑记：从 0% Adoption 到完整解析 背景 项目是 Next.js 15 静态导出，部署在 Cloudflare Pages。想接入 Sentry 做

纯前端做格式化工具：Node.js 库在浏览器里跑不了的教训 问题清单 开发过程中，三个常用库在浏览器里全部翻车： 库 用途 在浏览器里的表现 terser JS 压缩 ❌ fs is not def

Next.js 静态部署到 Cloudflare Pages 后，偶尔打开是白屏，刷新就好了。 经过反复排查，最后发现是 Next.js 和 Cloudflare 之间一个微妙的配合问题。

我用 Next.js 15 搭建了一个 103 个工具的在线站点，部署在 Cloudflare Pages 上。一切看起来很美好，直到控制台开始刷 Hydration Error #418。

103 个工具只用了 2 个布局组件：UtlKit 架构设计 103 个工具，但不需要 103 套 UI。好的架构设计让开发效率翻倍。 整体架构 项目整体架构图 目录结构 组件抽象：80% 的工具共享

花2个月时间做了一个完全免费、不用注册、没有广告、纯前端计算、数据不出浏览器，包含103个常用工具的网站UtlKit。