Web アプリの JS/CSS バンドルファイルサイズ。webpack/Vite/esbuild が生成、2026年は <100KB gzip 圧縮+Code Splitting+Tree Shaking が標準。
バンドルサイズ (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% 削減。
pnpm analyze 結果を投入→ 不要 import/重複 lib 検出| バンドラー | 速度 | サイズ最適化 | 学習コスト | 採用率 | 強み |
|---|
| Vite 6.5 | 超高速 (esbuild) | ★★★★★ | 低 | 急上昇 +180% | dev サーバ最速、HMR 神 |
| webpack 5.99 | 中速 | ★★★★ | 高 | エンタープライズ 50%+ | 業界標準、機能最豊富 |
| esbuild 0.25 | 最速 (Go 製) | ★★★★ | 中 | Vite/Tsup ベース | プリミティブ高速 |
| Rollup 5 | 高速 | ★★★★★ | 中 | ライブラリ作者 | Tree Shaking 最強 |
| Bun bundler | 最速 (Zig 製) | ★★★★ | 低 | 急上昇 | Bun ランタイム統合 |
| Parcel 2 | 高速 | ★★★ | 最低 | 個人開発 | ゼロ設定 |
| SWC + tsup | 高速 | ★★★★ | 中 | TS ライブラリ | TypeScript 最適化 |
| Turbopack (Next.js) | 高速 | ★★★ | 低 | Next.js 16+ | Next.js 専用 |
Web フロント開発+バンドル分析の自作PC：
実装パターン：
import { Button } from 'lib' ✓ デフォルトより効率良lazy(() => import('./Heavy')) で動的読込、初期バンドル -30-60%<Image /> (Next.js) で WebP 変換+遅延読込、JS バンドル外@babel/preset-env useBuiltIns: 'usage' で必要 polyfill のみ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% 削減事例多数。