Astro 如何啟用 Cloudflare Pages 建置快取？設定步驟與速度實測

最近修改部落格文章時，每次等 Cloudflare Pages 部署都要好幾分鐘。我讓 Agent 檢查圖片能不能優化，或是有沒有快取可以用。結果開啟建置快取後，建置時間就從約 229 秒縮短到 81 秒。

本站剛完成從 Hugo 重寫成 Astro，透過 Git 推送讓 Pages 自動建置。檢查後發現，每次建置都在重新轉換同一批圖片，連只改文字也一樣。

啟用建置快取

Cloudflare Pages 的設定位置在「Workers & Pages」。選擇網站的 Pages 專案後，依序開啟「Settings → Build → Build cache」，再按下「Enable」。

依照 Cloudflare 的建置快取文件，這項功能需要 v2 或更新的建置系統。本站使用 v3，開啟後保留原本的 npm run build 和輸出目錄 dist，就能正常使用。

Astro 會將處理過的圖片保存在 node_modules/.astro，Pages 也支援快取這個目錄。沿用 Astro 預設設定的專案不需要另外修改，已有自訂 cacheDir 時則要先核對位置。目錄設定可參考 Astro 的圖片快取說明。

確認快取生效

開啟後照平常方式推送 Git，讓 Pages 完成一次建置並保存快取。第一次還是會花時間處理圖片，建置紀錄最後應該會出現：

1Success: Build output uploaded to build cache.

下次修改文章並推送 Git 後，再打開新一次的建置紀錄，確認出現還原成功的訊息：

1Success: Build output restored from build cache.

Astro 的圖片紀錄也會顯示 reused cache entry，表示這次沿用了已經處理好的圖片。

建置命令不加 npm ci。依照 npm ci 文件，它會先清除 node_modules，放在快取還原後執行就會連 Astro 快取一起刪掉。本站由 Pages 處理依賴安裝，建置命令維持原樣。

建置速度實測

本站的 110 張原圖會轉成不同尺寸與格式，總共產生 1,440 個圖片版本。

以下是 2026 年 9 月 16 日使用 Astro 7.3.2 的實測。三次使用相同提交，時間只計算建置階段，不含排隊、複製程式碼與部署：

這次建置縮短了約 65%，1,440 個圖片版本全部命中快取。原圖、圖片品質與原本的檢查流程都保留，Agent 也比對過頁面並抽查圖片，輸出結果一致。

這個差距和本站的圖片處理量有關，圖片較少的網站不一定能省下這麼多時間。新增圖片或修改轉換設定時也需要重新處理，快取閒置七天後則可能被清除，下次建置就得重新建立。

加快沒有快取時的建置

快取只能省下重複的轉換。第一次建置或快取被清除時，所有圖片都要重新轉檔，這時可以調低 Astro 圖片服務的 effort。effort 代表 sharp 壓縮時花多少運算去找更小的檔案，AVIF 的範圍是 0 到 9、WebP 是 0 到 6，預設都是 4。本站在 astro.config.mjs 把 AVIF 調成 3、WebP 調成 2：

1export default defineConfig({
2  image: {
3    service: {
4      entrypoint: 'astro/assets/services/sharp',
5      config: { avif: { effort: 3 }, webp: { effort: 2 } },
6    },
7  },
8});

以下是 2026 年 9 月 24 日在本機的實測。Cloudflare 沒有公開建置環境的 CPU 規格，我用 4 核心模擬，原本的冷建置約 221 秒，和遠端實測的 229 秒相近。SSIM 是轉檔後和原圖的相似度，1 代表完全相同：

連跑兩輪的結果相同。PNG 維持 sharp 的預設值 7（範圍 1 到 10），我測試時把 PNG effort 調成 4，程式碼截圖出現了明顯的色塊。

改完設定後，已經在快取裡的圖片不會重新編碼，因為 Astro 的圖片快取 Key 不包含 effort。要看到新設定的效果，得等快取過期，或在 Pages 設定按下「Clear Cache」，再完成一次冷建置。

總結

Astro 專案可以先到 Cloudflare Pages 開啟「Build cache」，完成一次建置後再確認下一次有沒有還原成功。本站因此省下兩分多鐘的建置時間，也就暫時不需要批次壓縮全站原圖。沒有快取的建置則靠調低 AVIF 與 WebP 的 effort，圖片處理時間從 129 秒降到 53 秒，檔案大小幾乎不變。

Ted Liou

Unity 現役工程師，Unity、AI 技術開發經驗分享與諮詢。