経緯
多量のページを扱うサイトを静的サイトジェネレータである VuePress で運用していたところ、ページ数が増えるとビルドが終わらなかったりクラッシュするケースがあることがわかった。
VuePress は比較的若いフレームワークなので、同じ Node ベースでもう少し実績のある Gatsby も試したが、似たような結果だった。
そこで、複数の静的サイトジェネレータを使って、ファイル数が極端に多い場合や少量だがサイズの大きいファイルを扱う場合のビルドのパフォーマンスを比較することにした。
比較対象として、これまでよく使ってきた Middleman と、使ったことはないが気になっている Hugo でも試した。
注意
厳密なベンチマークを想定していないので、数値は目安程度のもの。
検証対象
検証パターン
各ジェネレータごとに次のものを試した。
- だいたい初期状態
- 1.8KB 程度の Markdown ファイルが1000ファイルある場合
- 同15000ファイルある場合
- 単一の約3MBの Markdown ファイルがある場合
- 単一の約17MBの Markdown ファイルがある場合
- 単一の約84MBの Markdown ファイルがある場合
Markdown は、これを使用した。
検証結果
| フレームワーク | 初期状態 | 1.8KBx1000 | 1.8KBx15000 | 3MBx1 | 17MBx1 | 約84MBx1 |
|---|---|---|---|---|---|---|
| Gatsby | 0m13.75s | 0m39.85s | クラッシュ1 | 84s | 打ち切り2 | - 3 |
| VuePress | 0m8.954s | 1m10.749s | クラッシュ1 | 6m43.184s | クラッシュ1 | - 3 |
| Middleman | 0m1.386s | 0m6.165s | 1m15.846s | 0m8.783s | 1m9.114s | 11m19.757s |
| Hugo | 0m0.108s | 0m1.726s | 1m44.279s | 0m0.380s | 0m1.530s | 0m6.981s |
まとめ
Hugo (Go) が圧倒的。
Node で動く Gatsby, VuePress は並列処理されて CPU は使い切れているが、ビルドはいまいち速くない。また、ヒープが不足といってコケるケースが多かった。
Middleman (Ruby) は CPU は1コアしか使えていないが、意外に速い。
VuePress はあまり多数のファイルを扱うことを想定していないらしい
一部のファイルには想定される最大サイズがあるらしい。ルーティングなどのためのファイルのようなので、ファイル数が多すぎると問題になるようだ。
$ time vuepress build
WAIT Extracting site metadata...
[22:50:49] Compiling Client
[22:50:49] Compiling Server
(node:39358) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[BABEL] Note: The code generator has deoptimised the styling of /Users/tnzk/.config/yarn/global/node_modules/vuepress/lib/app/.temp/routes.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/tnzk/.config/yarn/global/node_modules/vuepress/lib/app/.temp/siteData.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/tnzk/.config/yarn/global/node_modules/vuepress/lib/app/.temp/routes.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/tnzk/.config/yarn/global/node_modules/vuepress/lib/app/.temp/siteData.js as it exceeds the max of 500KB.