Skip to main content

SSG 效能實測

本文包含 Astro, 11ty, Hugo 三個 SSG 的效能實測。

測試一:部落格

zachleat/bench-framework-markdown 測試 2000 篇 Markdown 文件,分別使用 Astro/11ty/Hugo 最知名的三個主題 Astro Paper/eleventy-base-blog/hugo-PaperMod,測試於 M1 MBP 8G,結果分別如下1

❯ hyperfine -r 3 'hugo'
Benchmark 1: hugo
Time (mean ± σ): 5.145 s ± 0.174 s [User: 14.929 s, System: 0.899 s]
Range (min … max): 4.984 s … 5.330 s 3 runs

❯ hyperfine -r 3 'npm run astro build'
Benchmark 1: npm run astro build
Time (mean ± σ): 9.219 s ± 0.429 s [User: 10.211 s, System: 2.420 s]
Range (min … max): 8.868 s … 9.697 s 3 runs

❯ hyperfine -r 3 'npx @11ty/eleventy'
Benchmark 1: npx @11ty/eleventy
Time (mean ± σ): 5.759 s ± 0.294 s [User: 6.179 s, System: 0.550 s]
Range (min … max): 5.564 s … 6.097 s 3 runs

後面會說到 Hugo 的缺點,我認為這些缺點的嚴重程度應該換到十倍的數量級效能領先,然而實際是兩千篇文章只快 80%,還不是 12 分鐘變成 20 分鐘只是 5 秒變成 9 秒,試問有多少網站超過兩千篇文章?這還只是性能孱弱的 M1 8G,因此 Hugo 的速度優勢現在看來蕩然無存。

不過 Hugo 毫無疑問的是最快的 SSG 工具

測試二:文檔

測試最常見的三欄文檔佈局,也就是左側導航,中間主文,右邊 TOC。

DefaultsidebarCachedRendervs Deca cached
Deca188s24.3s
Docusaurus 3.9.2540s22× slower
Hugo DocsyError
Hugo Hextra382s15.7× slower
Hugo Doks2122s5× slower
Astro Starlight144s1.3× faster
Astro Starlight + pageFind indexing280s

由於 Hugo 缺乏高度自定義能力,因此 Astro 快取左側複雜度 O(N^2) 的導航欄,不同頁面共用快取結果並且只修改 active 屬性,這種優化 Hugo 就做不到。

結語

我還是認為 Hugo 的各種限制應該要讓他比競爭對手快 10 倍,但是實際上只有 2~3 倍,這種幅度的效能領先不夠彌補他的缺點。

如果你需要建立一個五萬頁一百萬頁五百萬頁甚至上億頁面的網站時,Hugo 還是你的首選。

Footnotes

  1. 你可能說三個不同主題 build result 不一樣怎麼公平比較,你想的沒錯,但這就是客觀事實:我們最終面臨的終究是現實世界綜合起來的場景,如果我完全移除主題只構建 plain 頁面,那只是在比較多工併發效能和 markdown parser Goldmark/Markdown-it 之間的執行效能而已,根本就不是在比框架本身。現實世界會遇到的是框架之間的數據交互、驗證、轉換、各種 overhead,用主題的測試反而是給 JS 框架加重負擔,因為 Hugo 再怎麼複雜也只有模板沒什麼數據交互。

  2. Doks 的行動端導航欄沒有渲染 nav 因此異常快。