33種類のWebミニゲームを初期描画0.8秒で提供するアーキテクチャ設計

33種類ものミニゲームを1つのWebサイトに統合する場合、すべてのコードや音声を一度に読み込むとページ重量が膨れ上がり、初期表示が極端に遅くなります。

私はGameHub (games.ladestack.in) を構築し、初期描画（FCP）0.8秒未満を達成しました。

動的コード分割（Dynamic Imports）の徹底

各ゲームのスクリプトは、ユーザーが「プレイ」を押した瞬間に初めて読み込まれます。トップページのロード時には、軽量なゲーム一覧カタログのみがダウンロードされます。

Web Audio APIによる音声の合成

重いMP3ファイルをダウンロードさせる代わりに、Web Audio APIのオシレーターを用いて8bit風の効果音をリアルタイム合成し、数メガバイトの転送量を削減しました。

メモリリークのない設計

ゲーム切り替え時にCanvasのアニメーションフレームやタイマーを確実に破棄する共通ライフサイクルフックを用意し、長時間の連続プレイでも動作が重くならないよう最適化しています。