VuePressのページ上限数はどのくらいか？
VuePressを使っていて気になったのだが、ページの内容は動的に取得しているものの、どのようなページがあるのかや、frontmatterに指定された内容などはビルドされたファイルを見る限り、ページ読み込み時にロードされているようだ。
ということは、（おそらくある程度、リッチな実装の静的サイトジェネレータはどれも似たり寄ったりの実装にならざるを得ないかと思われるが）ページ数が増えれば増えるほど、静的に読み込まれるデータ量も増えるということではないか？
ふと気になってページ数が増えていった時にどうなるのか、調べてみた。
調べる内容としては下記である。
- PageSpeed Insights (opens new window)の点数
- 実際にブラウザでみた時の体感速度
- ビルドにかかった時間
# ページを大量に生成して計測
まずほとんど記事がない状態のvuepressではスマホが99点、PCは100点の状態となった。
ここから記事を投入してどうなるか様子を見てみる。
$ cd src/articles/nginx/
$ for ((i=0; i < 100; i++)); do cp dummy.md dummy${i}.md; done
$ yarn build && rsync ... # サーバーアップロード
2
3
記事を100件作成すると、体感的な遅さは感じなかったが、Page Speet Insightsで計測すると、PCでは70〜80点、スマホでは60〜70点程度にまで落ち込んでしまった。
ただし、ブラウザで確認するとPC/スマホとも、体感的にはほとんど変わらないように思われた。
さらに増やして試してみることにする。
$ for ((i=0; i < 300; i++)); do cp dummy.md dummy${i}.md; done
$ yarn build && rsync ...
$ for ((i=0; i < 600; i++)); do cp dummy.md dummy${i}.md; done
$ yarn build && rsync ...
$ for ((i=0; i < 1000; i++)); do cp dummy.md dummy${i}.md; done
$ yarn build && rsync ...
2
3
4
5
6
7
8
300件、600件と増やしてもPageSpeed Insights の点数、体感速度とも100件の時とあまり変わらない。さすがに1000件を超えるとPageSpeed Insights の点数が少し下がったが、それでも体感としてはあまり変わらないような気がした。
また、ビルドにかかる時間は徐々に増えていった。
手元のMacOSでは、ビルドに600件で1分、1000件で90秒程度かかった。
ちなみに1500件でビルドしようとしたところ、メモリ不足でビルドに失敗したので、それ以上は断念。おそらくどの静的サイトジェネレータも事情はあまり変わらない気がするが、ページ数としては1000件強が限度なのかと思われる。
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
# 結果
結果としては下記のようになった。
| 件数 | スマホ | PC | ビルド時間（秒） |
|---|---|---|---|
| 100 | 67 | 82 | 23 |
| 300 | 66 | 71 | 30 |
| 600 | 67 | 70 | 61 |
| 1000 | 50 | 73 | 92 |
個人的にはPageSpeed Insightsの点数さえ気にしなければ1000件強までは耐えられるか、というところではないかと思う。