バンドルサイズ（バンドルサイズ）

概要

バンドルサイズ (Bundle Size) は Web アプリの JavaScript/CSS バンドルファイル (1ページに必要な全コードを統合した単一ファイル) のサイズ。バンドラー (webpack/Vite/esbuild/Rollup/Bun) で生成され、Core Web Vitals (Largest Contentful Paint, First Contentful Paint, Interaction to Next Paint) に直結する重要指標。

2026年4月時点の Web フロント業界基準は ① SPA バンドル: 100-300KB gzip 圧縮 (理想 <100KB) ② Server Components (Next.js App Router): クライアント JS 50-150KB ③ Static Site (Astro/Eleventy): <50KB ④ 大規模アプリ (Notion/Slack): 500KB-2MB (動的読込前提) ⑤ Headless WP: 80-200KB。HTTP Archive 2026年Q1 によると Web 中央値 470KB JS、上位 25% は 1.4MB+で過剰肥大化が課題。

2025-2026年最大トレンドは ① Vite 6.5 普及 (esbuild ベース、webpack 比 10-50倍速)、② Bun bundler 急成長 (Vite/esbuild 競合)、③ Server Components で 60-80%削減 (Next.js 16/Remix v3)、④ Tailwind CSS v4 PurgeCSS で CSS 90%削減 (10-50KB)、⑤ AI バンドル分析 (Claude Code/Cursor で「不要 import 検出+削除提案」自動化)、⑥ HTTP/3+Brotli 圧縮 で実質伝送 30-50% 削減。

主な特徴・仕組み

• 計測ツール: webpack-bundle-analyzer、source-map-explorer、Vite plugin-visualizer、Bundlephobia (Web)、Rollup Visualizer
• 目標値 2026: モバイル 3G 想定で <100KB gzip、デスクトップ <300KB、Image はカウント外
• Tree Shaking: 未使用 export 自動削除 (ES Module 必須)、webpack/Vite/esbuild 標準対応
• Code Splitting: 動的 import で初期バンドル分割、React.lazy/dynamic import で実装
• Compression: gzip (-65%) 標準、Brotli (-75%) で更に -10%
• CSS バンドル: Tailwind CSS v4 で <10KB (PurgeCSS 後)、Tailwind v3 で 30-100KB
• Source Map: 本番では非配信 (--source-map=hidden)、サイズ +500KB-2MB 不要
• CDN 戦略: bundle 静的化→ CloudFront/Cloudflare で全世界 50ms 以内配信
• Core Web Vitals: LCP <2.5秒 (バンドル小+画像最適化)、FCP <1.8秒、INP <200ms
• AI 分析: Claude Code で pnpm analyze 結果を投入→ 不要 import/重複 lib 検出

主要バンドラー比較表（2026年4月）

自作PC でのバンドル最適化開発環境

Web フロント開発+バンドル分析の自作PC：

• CPU: Ryzen 7 7700X (¥48,800) — Vite dev サーバ+ビルド+ esbuild並列
• メモリ: DDR5-5600 32GB (¥24,800) — node_modules×複数案件で 200GB+
• ストレージ: NVMe Gen4 SSD 1TB (¥18,800)
• エディタ: VS Code (無料) または Cursor ($20/月)
• 分析ツール: webpack-bundle-analyzer (npm install)、Vite plugin-visualizer、Bundlephobia (Web)
• CI/CD: GitHub Actions で各 PR ごとに Bundle Size diff コメント (size-limit GitHub Action)
• AI 補助: Cursor / Claude Code で「pnpm analyze 結果から削減提案」自動化、月¥3,000 で生産性激増

バンドルサイズ最適化テクニック

実装パターン：

• Tree Shaking 最大化: 名前付き export 使用 import { Button } from 'lib' ✓ デフォルトより効率良
• Code Splitting: React lazy(() => import('./Heavy')) で動的読込、初期バンドル -30-60%
• 画像最適化: <Image /> (Next.js) で WebP 変換+遅延読込、JS バンドル外
• Lib 軽量化: Moment.js (300KB) → date-fns (15KB)、Lodash (70KB) → lodash-es 個別 import
• Polyfill 自動化: @babel/preset-env useBuiltIns: 'usage' で必要 polyfill のみ
• Turbopack/Vite 移行: webpack → Vite で dev/build 各 5-50倍速、本番 bundle 同等
• Brotli 配信: Cloudflare/Vercel/Netlify で標準有効、gzip 比 -10%

バンドルサイズと類似指標の違い

• バンドルサイズ vs ファイルサイズ: ファイルサイズは生バイト、バンドルは圧縮+伝送考慮
• バンドル vs ライブラリサイズ (Bundlephobia): ライブラリは単体、バンドルは統合後
• バンドル vs Network Payload: Network は HTML+JS+CSS+画像の合計、バンドルは JS/CSS のみ
• バンドル vs ビルド時間: ビルドは生成所要時間、バンドルは生成物のサイズ

よくある質問（FAQ）

Q1: バンドルサイズ目標は何 KB？ A: ① モバイル特化 SPA: <100KB gzip ② 汎用 SaaS: 100-300KB ③ ダッシュボード/管理画面: 300-500KB ④ Notion/Slack 級巨大: 500KB-2MB+ Code Splitting。Core Web Vitals 緑ゾーンを目指すなら 200KB 以下推奨、Google PageSpeed Insights で測定。

Q2: webpack → Vite 移行のコスト？ A: 中規模 SaaS で 1-2週間。設定ファイル書換え (webpack.config.js → vite.config.ts)、エイリアス・ポリフィル設定、CSS Modules 設定で完了。dev/build 速度 5-50倍向上、開発体験劇的改善 (HMR <100ms)、移行コスト 1ヶ月以内で回収。

Q3: AI でバンドル削減はどこまで自動化？ A: 大半自動化可。Claude Code で「webpack-bundle-analyzer 結果を投入→ 重複/未使用 import を JSON で出力→ 自動修正 PR」を 30秒で実行、人手 4-8時間作業が 1分に。月¥3,000 (Cursor/Claude Code Pro) でフロント開発生産性 +30-50%、バンドルサイズ -20-40% 削減事例多数。

まとめ

• バンドルサイズ = JS/CSS バンドルファイルサイズ、Core Web Vitals 直結
• 2026年標準は <100KB gzip (SPA)、Vite 6.5+Tailwind v4+Server Components で達成可
• 主要バンドラー: Vite (急上昇)/webpack (エンタープライズ)/esbuild/Bun
• 自作PC は Ryzen 7+32GB+Cursor で開発、AI 自動化で削減 -20-40% 達成