给博客加一个「在线工具」区：先想清楚边界

这个站点托管在 Cloudflare Pages 上，只有构建产物，没有服务器。想加「在线工具」，第一件事不是选技术，而是把边界钉死：哪些方案一开始就不能碰。

三条不能破的线​

1. 不能有后端。不引入 Pages Functions、Workers、数据库。工具要么在构建时算，要么在访客浏览器里算。
2. 文件不能上传。图片、文本都只留在内存里，页面不发起任何上传请求——这条既是隐私承诺，也顺手砍掉了大半攻击面。
3. 不能拖慢主站。工具是低频入口，首页和文章页不该为它多下载 1 KB。

这三条定完，技术选型几乎没有悬念：一切以「浏览器原生能力 + 静态资源」为准。

结构怎么拆​

• 每个工具一个独立路由：/tools/image-compress、/tools/image-crop……Docusaurus 会按页面自动分包，进哪个页面才加载哪份代码。
• 重逻辑抽到 src/lib/，在用户真正操作时用 await import() 拉进来。
• WASM 编码器放 static/wasm/，自己托管，不挂 CDN。
• 工具列表页 /tools 只放卡片和链接，自身只有 2 KB。

实测的加载账​

冷启动禁用缓存测下来：首页 570 KB JS、WASM 请求 0；工具页只多自己的 10 KB；点「开始压缩」后才出现 22 KB 编码库和 246 KB 的 mozjpeg。也就是说，工具对首页的贡献是 0。

一个反直觉的经验​

先写功能再想边界，通常会返工。比如「本地处理」如果一开始没定死，很容易顺手加个「上传到服务器转码更稳」的念头，然后整条安全线就塌了。先把「不能做什么」写进文档，比先挑框架有用得多。