調査依頼: B-154 現状バンドル分析

背景

• B-154（バンドルサイズ・配信パフォーマンス最適化）の事前調査
• cycle-61のB-159で「ツールとチートシートのダイナミックインポート廃止・静的化」が完了済み
• 元メモ(19ca986ec6e)で指摘された#5,#6,#8,#10の問題がどの程度残存しているか調査する

調査内容

1. npm run buildを実行し、ビルド出力からルート別のサイズ情報を取得する
2. .next/static/chunks/配下で300KB超のchunkを特定する
3. B-159後のtools/cheatsheets構造を確認し、#5,#6の不要コード巻き込みが解消されたか確認する
4. #8の一括読込構造（辞典indexの全データクライアント渡し等）の現状を確認する
5. ルート別の依存関係を可視化するため、@next/bundle-analyzerの導入可否を調査する

報告形式

• 各問題(#5,#6,#8,#9,#10)の現状ステータス（解決済み/未解決/部分的に解決）
• 未解決の問題について、影響の大きさと対象ファイル
• ルート別のJS転送量の一覧（ビルド出力から）
• 300KB超chunkの一覧（ファイル名、サイズ、推定内容）

B-154 現状バンドル分析 調査レポート

調査環境

• 日時: 2026-03-03
• Next.js: 16.1.6 (Turbopack)
• ビルド: npm run build 正常完了 (3870ページ生成)

---

1. B-159後のtools/cheatsheets構造の確認

#5 toolsの不要コード巻き込み → 解決済み

• src/app/tools/[slug]/ToolRenderer.tsx は存在しない（削除済み）
• src/app/tools/[slug]/ ディレクトリ自体が削除済み
• 各ツールが独立したページ(page.tsx)を持つ構成に変換済み（33ツール全て確認）
• 各ツールのJSチャンクは独立しており、他ツールのコードを含まない

#6 cheatsheetsの不要コード巻き込み → 解決済み

• src/app/cheatsheets/[slug]/CheatsheetRenderer.tsx は存在しない（削除済み）
• src/app/cheatsheets/[slug]/ ディレクトリ自体が削除済み
• 7チートシート全て独立したページを持つ
• 全チートシートは共通チャンク1個(5c8f80e90b3ad8bd.js, 3KB)を共有（効率的な構造）

---

2. ルート別JS転送量一覧（ページ固有チャンクのみ、shared layout除く）

ツール（ページ固有JSサイズ）

next experimental-analyze --output の結果（バイト値）:

ルート	ページ固有JS
char-count	85,730 B (83 KB)
hash-generator	86,020 B
base64	86,416 B
json-formatter	86,735 B
url-encode	86,868 B
kana-converter	87,183 B
byte-counter	87,267 B
... (中略) ...
sql-formatter	92,854 B
image-resizer	93,953 B
cron-parser	96,496 B
business-email	101,635 B
qr-code	106,048 B
keigo-reference	117,612 B
traditional-color-palette	123,653 B
yaml-formatter	125,401 B
markdown-preview	126,491 B

チートシート（全て同一）

ルート	ページ固有JS
/cheatsheets/* (7ルート全て)	83,088 B (83 KB)

ゲーム（実測チャンクサイズ）

ルート	ページ固有チャンク
/games/irodori	73 KB (b26f29337641a9db.js)
/games/nakamawake	64 KB (7a80593aa94f3831.js)
/games/kanji-kanaru	61 KB (7d9680c016ae5b5c.js)
/games/yoji-kimeru	57 KB (e9d73f0c424c8ec8.js)

辞典

ルート	ページ固有チャンク
/dictionary/kanji	52 KB
/dictionary/yoji	51 KB
/dictionary/colors	51 KB
/dictionary/colors/[slug]	85 KB (37KB page + 48KB layout)

ベースライン（全ページ共通）

• Root bundle (React + Next.js core): 401 KB (1fe3dd1fa85d0ae7.js 218KB + 45ed7e69dcc3b1e1.js 128KB + polyfill 109KB + その他)
• Layout shared chunks: 47 KB (0de72956749d1320.js 12KB + bbd4eb8f3eb5e095.js 35KB)
• 合計ベースライン: 448 KB

---

3. .next/static/chunks/ の300KB超チャンク一覧

現在300KB超は2チャンクのみ（いずれもlazy-loaded）:

ファイル	サイズ	内容	ロードタイミング
929a48e77516b6e2.js	421 KB	Mermaid.js本体（Langium/LSP parser）	ブログでmermaid図がある場合のみ
31e993058f348490.js	419 KB	Cytoscape.js（mermaidの依存）	同上

これらは いかなるページのentryJSFilesにも含まれない（確認済み）。
MermaidRendererコンポーネント内の useEffect + async import("mermaid") によりlazy-loaded。

Mermaidの完全バンドルサイズ（lazy時）

ブログでmermaid図がある投稿を表示すると、以下が追加ロードされる:

チャンク	サイズ
929a48e77516b6e2.js	421 KB (Mermaid本体)
31e993058f348490.js	419 KB (Cytoscape)
267de094e16f561a.js	258 KB (KaTeX - mermaidの依存)
その他6チャンク	490 KB
合計	約1.6 MB

現在52記事中8記事がmermaid図を含む。それ以外の44記事では mermaid bundle はロードされない（MermaidRendererがDOM要素を発見できず早期リターン）。

---

4. 各問題の現状ステータス

#5 toolsページの不要コード巻き込み → 完全解決

• [slug]ディレクトリ廃止・全ツール個別ページ化済み（B-159で対応）
• 各ツールのJSは他ツールのコードを含まない

#6 cheatsheetsでも同型の巻き込み → 完全解決

• [slug]ディレクトリ廃止・全チートシート個別ページ化済み（B-159で対応）
• 7つのチートシートが3KBの共有チャンクを共有（効率的）

#8 一括読込になりやすい構造 → 部分的に残存

影響が大きい箇所（残存):

ゲームのJSON直接import:

• /games/irodori: GameContainerがtraditional-colors.json(43KB)とschedule(6KB)をbundleに直接import → 73KBチャンク
• /games/nakamawake: nakamawake-data.json(29KB) + schedule(20KB)を直接import → 64KBチャンク
• /games/kanji-kanaru: kanji-data.json(22KB) + schedule(19KB)を直接import → 61KBチャンク
• /games/yoji-kimeru: yoji-data.json(17KB) + schedule(19KB)を直接import → 57KBチャンク

辞典indexのRSCペイロード:

• /dictionary/colors: 全250色データをRSCペイロードで転送 → colors.rsc: 50 KB
• /dictionary/kanji: 全80漢字データをRSCペイロードで転送 → kanji.rsc: 37 KB
• /dictionary/yoji: 全101語データをRSCペイロードで転送 → yoji.rsc: 33 KB
• ただしこれらはRSCペイロードであり、JSバンドルではない（初回HTML取得時に転送）

tools/traditional-color-paletteの全色data読み込み:

• getAllColors()で全250色をクライアントに読み込み → 90KBチャンクに含まれる

tools/keigo-reference:

• logic.ts に全敬語データをハードコード（1248行）→ 37KBチャンク

#9 feed系ルートが動的実行 → 残存（低優先）

• /feed, /feed/atom, /memos/feed, /memos/feed/atom, /ads.txt が動的(ƒ)
• Cache-Control: public, max-age=3600, s-maxage=3600 は設定済み
• 実際のTTFBへの影響はCDNキャッシュ有無で変わる

#10 バンドル肥大 → 大幅改善（ただし残存懸念あり）

• 300KB超チャンクは2個（いずれもlazy-loaded）
• B-159以前は大きなチャンクが複数のページで常時ロードされていたが現在は全てlazy
• 懸念: mermaid依存チェーン全体が約1.6MBと非常に大きい（ただしlazy）
• ゲームページのチャンクが57〜73KBと相対的に大きい（JSONデータ埋め込みのため）

---

5. @next/bundle-analyzer 導入可否

現状: next experimental-analyze --output コマンドが既に package.json の analyze スクリプトとして存在している。

"analyze": "next experimental-analyze --output"

@next/bundle-analyzer（webpack用）は導入不要:

• プロジェクトはTurbopack（Next.js 16.1.6のデフォルト）を使用
• @next/bundle-analyzer はwebpack専用であり、Turbopackでは動作しない
• Turbopack対応のネイティブツールとして next experimental-analyze が既に使用可能

推奨: 既存の npm run analyze を活用する。ビルド後に実行することでインタラクティブなチャート表示も可能。

---

6. 残存問題の優先度評価

問題	影響度	対象	推奨アクション
ゲームJSONデータ直接import	中	4ゲーム	JSONを静的アセット化してfetch on demandに変更
mermaidバンドル大きい(1.6MB lazy)	低	8ブログ記事のみ	mermaidのtree-shakingまたは軽量代替を検討
辞典indexのRSCペイロード過大	低	3ページ	サーバー側でページネーション/仮想スクロール検討
feed系ルートが動的	低	5ルート	ISRやEdge Cachingで対応可能
keigo-reference/traditional-color-paletteの全データ読み込み	低	2ページ	フィルタリングのサーバーサイド移行を検討