制作说明

这个网站是怎么建成的,以及代价是什么。下面的数字是量出来的,不是说出来的 — 字体体积在每次生成页面时直接读取实际文件,所以不会过期。

刻意做成静态

Next.js 导出为纯文件,由 Cloudflare 边缘节点提供。你打开这一页时,没有任何服务器在执行我的代码 — HTML 在构建时已经写好,直接交给你。这是最便宜的托管方式,也是最少东西会坏的做法。

实测 Lighthouse 99 / 100 / 100 / 100 · 2026-08-27

把中文字体裁到刚好

提供中文就是提供数以千计的字。上游字体家族约 125MB。一个构建脚本会读出本站实际用到的每一个中文字,把字体裁到只剩这些;另有检查程序,一旦新文案出现子集未覆盖的字就让构建失败。它已经拦截过四次。

实测 124.7 MB → 1387 KB

我不小心发出去的一 MB

语言切换器位于置顶栏,所以始终在画面上。Next 默认会 prefetch 链接,于是每一位英文访客都默默下载了两个中文版本及其字体 — 一个没有中文的页面,却收了一 MB 的字。看源代码永远找不到:那些请求只在真实浏览器 hydration 之后才出现。最后一个属性就修好了。

实测 1716 KB → 700 KB

三种语言,刻意不一致

香港版与内地版并非同一段文字换字形。香港的写法本身夹杂英文 — 当地招聘广告就写“前端(Frontend)”— 所以繁体版保留英文技术词。内地技术写作会翻译,所以简体版写“后端”“微前端”“事件驱动”。两边用同一套措辞,其中一边必然读起来像外人写的。

这一页对你知道什么

没有 cookie、没有指纹追踪、没有第三方嵌入,也没有广告或社交网站的脚本。一条严格的 content-security policy 列明所有获准执行的来源,而清单很短:本站,加上 Cloudflare 那个不收集个人信息的访客统计。这条策略最初几周连统计本身都一并挡掉了,而且是悄悄挡的,直到被量出来为止。

动效可以关掉

光标、点阵、雷达扫描与区块淡入,全都会检查你的系统是否要求减少动态效果,若是则以静态呈现。这不是藏在菜单里的开关 — 它跟随你操作系统本来就有的设置。

这里的一切都是静态文件。没有服务器、没有数据库、没有账户系统,因为个人网站根本不需要,而每一项都是额外要维护的东西。

ryanxu.dev