製作說明

這個網站是怎樣建成的,以及代價是甚麼。下面的數字是量出來的,不是講出來的 — 字型體積在每次生成頁面時直接讀取實際檔案,所以不會過期。

刻意做成靜態

Next.js 匯出成純檔案,由 Cloudflare 邊緣節點供應。你打開這一頁時,沒有任何伺服器在執行我的程式 — HTML 在 build 時已經寫好,直接交給你。這是最便宜的託管方式,也是最少東西會壞的做法。

實測 Lighthouse 99 / 100 / 100 / 100 · 2026-08-27

把中文字型裁到剛好

供應中文即是供應數以千計的字。上游字型家族約 125MB。一個 build script 會讀出本站實際用到的每一個中文字,把字型裁到只剩這些;另有檢查程式,一旦新文案出現子集未涵蓋的字就令 build 失敗。它已經攔截過四次。

實測 124.7 MB → 1387 KB

我不小心送出去的一 MB

語言切換器位於置頂列,所以永遠在畫面上。Next 預設會 prefetch 連結,於是每一位英文訪客都默默下載了兩個中文版本及其字型 — 一個沒有中文的頁面,卻收了一 MB 的字。看原始碼永遠找不到:那些請求只在真實瀏覽器 hydration 之後才出現。最後一個屬性就修好了。

實測 1716 KB → 700 KB

三種語言,刻意不一致

香港版與內地版並非同一段文字換字體。香港的寫法本身夾雜英文 — 當地招聘廣告就是寫「前端(Frontend)」— 所以繁體版保留英文技術詞。內地技術寫作會翻譯,所以簡體版寫「后端」「微前端」「事件驱动」。兩邊用同一套措辭,其中一邊必然讀起來像外人寫的。

這一頁對你知道甚麼

沒有 cookie、沒有指紋追蹤、沒有第三方嵌入,也沒有廣告或社交網站的 script。一條嚴格的 content-security policy 列明所有獲准執行的來源,而清單很短:本站,加上 Cloudflare 那個不收集個人資料的訪客統計。這條政策最初幾星期連統計本身都一併擋掉了,而且是靜靜地擋,直到被量出來為止。

動效可以關掉

游標、點陣、雷達掃描與區塊淡入,全部會檢查你的系統是否要求減少動態效果,若是則以靜態呈現。這不是藏在選單裡的開關 — 它跟隨你作業系統本來就有的設定。

這裡的一切都是靜態檔案。沒有伺服器、沒有資料庫、沒有帳戶系統,因為個人網站根本不需要,而每一項都是額外要維護的東西。

ryanxu.dev