Vite は『開発体験』と『本番ビルド』で別の最適化が必要
Vite は ESM ベースで起動が速く HMR(Hot Module Replacement)が高速なビルドツールです。本記事では編集部の視点で、大規模アプリでのチューニングを公開情報をもとに整理します。Next.js App Router もご参考に。
開発時の最適化
(1) 依存事前バンドル(esbuild)：node_modules を一括変換。(2) optimizeDeps.include：頻出依存を明示。(3) server.warmup：起動時に main ファイルをプリロード。(4) キャッシュ削除：node_modules/.vite の再生成。(5) HMR の境界：大規模では更新範囲制御。
本番ビルドの最適化
(1) rollupOptions.output.manualChunks：分割粒度の制御。(2) Tree shaking：sideEffects 設定。(3) 圧縮：esbuild/terser の選択。(4) CSS分割：cssCodeSplit。(5) レガシーブラウザ対応：@vitejs/plugin-legacy。
HMR の高速化
(1) 大規模ファイルの分割：影響範囲を狭める。(2) React Fast Refresh / Vue HMR：状態保持。(3) HMR の境界を意識した import 構造。(4) 無関係な再評価を避ける。(5) 変更ファイルの再ビルド時間を計測。Tailwind CSS 実践 も合わせて。
SSR / SSG 対応
(1) vite-plugin-ssr / Nuxt / SvelteKit：フレームワーク選び。(2) ssr.noExternal：CJS パッケージの ESM 化。(3) 静的生成：generateSitemapも併用。(4) Edge SSR：Cloudflare Pages 等で。(5) マイクロフロントエンド：module federation。
大規模での分割戦略
(1) page 単位の dynamic import。(2) vendor 分離：React/Vue 等を別チャンクに。(3) 共通モジュール：複数ページで使う UI ライブラリ。(4) preload / prefetch：体感速度向上。(5) バンドルサイズ監視：rollup-plugin-visualizer。CDN/Edge 実践 もご参考に。
失敗しがちなパターン
(1) 巨大バンドル一括ロード：初回表示が遅い。(2) 動的 import 多すぎ：リクエスト多発。(3) node_modules の CommonJS：SSR エラー。(4) 本番ビルドのキャッシュ未活用。(5) レガシーブラウザ未対応。対策は、(1)manualChunks、(2)適切な分割粒度、(3)ssr.noExternal、(4)CI でキャッシュ、(5)plugin-legacy、です。