Posted at

多量のページを扱う場合の静的サイトジェネレータのパフォーマンス


経緯

多量のページを扱うサイトを静的サイトジェネレータである 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.





  1. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 



  2. クラッシュこそしないものの 20分以上経過しても run graphql queries が終わらなかった。 



  3. 実施しなかった。