みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

多数のページのウェブサイトはSSGで作りにくい

ページが1万個を超えるウェブサイトを静的サイトジェネレーター(SSG)である VitePress を用いて作成しようとして,根本的な問題が生じることが分かりました.

VitePress で生成されたproduction用の全てのhtmlファイルには,hashmapが挿入される*1ため,以下の内容が含まれます.

<script>__VP_HASH_MAP__ = JSON.parse("......

hashmapは,以下のようなファイルのパスをキーとするオブジェクトです.

{
    "xxx.md":"0549eb78",
    ....
}

拡張子を除くファイル名は最短で3文字*2必要で,ハッシュは8文字ですから,1個のファイルにつき 20 文字が上記のJSONに追加されます.UTF8でエンコードする場合,全ての文字は1文字 1 Bの範囲なので,20 Bです.1万個のファイルがあれば,200 kBとなります.

1万個のhtmlファイルが生成され,それぞれに最低200 kB のhashmapが追加されるため,合計で 2 GB *3 のファイル群が生成されます.安価なウェブサーバーでは容量不足だと思います.

上記はVitePressで検証しましたが,他のSSGでも同様の問題が発生すると思われます.例えばGatsbyでは,preloadのために___chunkMappingという変数が全てのhtmlファイルに挿入されるようです*4

もちろん事前に読み込む機能を停止すれば問題は解決しますが,SSGの利点が失われてしまうので,単なるhtmlファイルを配信する方がよさそうです.

SSGは多数のページで構成されたウェブサイトを作成するのには向いていない技術だと分かりました.

*1:vitepress/utils.ts at main · vuejs/vitepress · GitHub

*2:アルファベットの大文字と小文字および数字の62文字を2個並べると3844 通りしかないため不足し,3個並べると238328通りで十分です.

*3:20 * 10000 * 10000 = 2 GB

*4:Code Splitting and Prefetching | Gatsby