概要

ビルド時にJavaScriptファイルサイズが500kBの推奨値を超過（585.75kB）しており、初回読み込み速度の改善が必要。Bundle分析を行い、Code SplittingやTree Shakingによる最適化を実施する。

現状の問題

% bun run build $ tsc -b && vite build vite v6.3.2 building for production... ✓ 1852 modules transformed. dist/index.html 0.53 kB │ gzip: 0.31 kB dist/assets/index-CoUduAEz.css 34.61 kB │ gzip: 6.93 kB dist/assets/index-DclNJBvj.js 585.09 kB │ gzip: 180.46 kB (!) Some chunks are larger than 500 kB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. ✓ built in 1.48s

• JavaScript Bundle Size: 585.75 kB（推奨500kB超過）
• gzip圧縮後: 180.73 kB（許容範囲だが改善余地あり）
• 警告メッセージ: "Some chunks are larger than 500 kB after minification"
• 初回読み込み: 大きなJSファイルによる体感速度の低下

目的

• Bundle Sizeを500kB以下に削減（目標：400kB以下）
• 初回読み込み速度の向上
• gzip圧縮後サイズを150kB以下に削減
• Code Splittingによる段階的読み込みの実現

実装内容

Phase 1: Bundle分析

• rollup-plugin-visualizerの導入
• Bundle構成の可視化・分析
• 大きなサイズを占めるライブラリの特定
• Tree Shakingの効果測定

Phase 2: Import最適化・ライブラリ分析

• 各ライブラリのBundle影響度測定
• 重複するライブラリの確認（例：date-fns vs dayjs）
• 使用頻度の低い大容量ライブラリの特定
• Tree Shaking効果の確認・改善
• 開発用ライブラリの本番除外確認

Phase 3: Code Splitting実装

• React.lazyによるページレベル分割
• Suspenseコンポーネントの実装
• 動的importによるコンポーネント分割
• ルート単位でのChunk分離

Phase 4: パフォーマンス測定

• Lighthouse Score測定（Before/After）
• 実際の読み込み速度比較
• gzipサイズの確認
• 初回訪問vs再訪問の体感速度確認

依存関係・優先度

• 依存関係なし
• 優先度：低

Budle Size が大きくても現状の Lighthouse スコア - Performance 100 で良好なので機能完成を優先する。

注意事項

• 機能への影響を最小限に抑える
• Code Splittingによるローディング体験の配慮
• 過度な最適化によるコード複雑化を避ける
• 実用的な改善効果を重視

ブランチ

perf/bundle-size-optimization