Vite バンドル最適化

目次

• 使用時期
• 説明
• 詳細
• 出典

Vite + React アプリケーションでバンドルサイズと構築パフォーマンスを最適化するための本番環境対応パターン。これらのパターンは Vite のアーキテクチャ(開発時のネイティブ ESM、本番環境での Rollup)を活用して、より小さく高速なバンドルを提供します。

使用時期

以下の場合にこれらのパターンを参照してください:

• 本番環境向けの新しい Vite + React プロジェクトをセットアップする場合
• npx vite-bundle-visualizer でバンドルサイズを分析する場合
• ビルド時間が遅い、またはバンドルサイズが予想より大きい場合
• webpack/CRA から Vite へ移行する場合
• Core Web Vitals(LCP, FID/INP, CLS)を最適化する場合

説明

• これらのパターンはプロジェクトセットアップ、ビルド設定、バンドルサイズレビューの際に適用してください。大きなバンドルまたは遅いビルドが見つかった場合は、npx vite-bundle-visualizer で診断し、関連するパターンを適用します。

詳細

概要

Vite は依存関係の事前バンドリングと開発環境での変換には esbuild を使用し、本番環境ビルドには Rollup を使用します。このデュアルアーキテクチャを理解することが効率的な最適化の鍵となります。以下のパターンは影響度の大きい順に整理されています。

---

1. バレルファイルインポートを避ける

影響度: 危機的 — スタートアップに 200～800ms、開発サーバーブートに 2～4s を追加する可能性があります。

バレルファイル(複数のモジュールから再エクスポートする index.ts)は、1 つのエクスポートのみを使用する場合でも、バンドラーにモジュールグラフ全体をロードさせます。これは React アプリケーションの #1 バンドルサイズの問題です。

避けるべき — バレル経由で全ライブラリをインポート:

import { Button, TextField } from '@/components'
// バレル内の ALL コンポーネントをロード、未使用のものも含む

import { Check, X, Menu } from 'lucide-react'
// 1,500+ 個のすべてのアイコンをロード(開発環境で ~2.8s)

推奨 — 直接インポート:

import { Button } from '@/components/Button'
import { TextField } from '@/components/TextField'

import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'
import Menu from 'lucide-react/dist/esm/icons/menu'

vite-plugin-barrel で自動修正:

// vite.config.ts
import barrel from 'vite-plugin-barrel'

export default defineConfig({
  plugins: [
    react(),
    barrel({
      packages: ['lucide-react', '@mui/material', '@mui/icons-material'],
    }),
  ],
})

これはビルド時にバレルインポートを直接インポートに変換し、人間工学的な構文と直接インポートのパフォーマンスを両立させます。

影響を受けやすいライブラリ: lucide-react、@mui/material、@mui/icons-material、@tabler/icons-react、react-icons、@radix-ui/react-*、lodash、date-fns、rxjs。

---

2. 手動チャンク分割を設定

影響度: 高 — キャッシュの向上、並列読み込み、初期バンドルの縮小。

Vite のデフォルトチャンキングはすべてのベンダーコードを 1 ファイルに配置します。変化しやすいアプリケーションコードがベンダーキャッシュを無効化しないように分割します。

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // コア React — ほとんど変更されない
          'vendor-react': ['react', 'react-dom'],
          // ルーター — めったに変更されない
          'vendor-router': ['react-router-dom'],
          // データレイヤー — ときどき変更される
          'vendor-query': ['@tanstack/react-query'],
          // UI フレームワーク — デザイン更新時に変更される
          'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
  },
})

モジュールパスに基づくより動的な分割の場合:

manualChunks(id) {
  if (id.includes('node_modules')) {
    if (id.includes('react-dom')) return 'vendor-react'
    if (id.includes('react-router')) return 'vendor-router'
    if (id.includes('@tanstack')) return 'vendor-query'
    return 'vendor' // その他すべて
  }
},

---

3. ルートレベルのコード分割で動的インポートを使用

影響度: 高 — 現在のページに必要なコードのみをロード。

React.lazy() と動的インポートを使用して、各ルートを独立したチャンクに分割します。

import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

const Home = lazy(() => import('./pages/Home'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Settings = lazy(() => import('./pages/Settings'))

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageSkeleton />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

Vite は各遅延インポートに対して自動的に個別チャンクを作成します。デバッグを容易にするために名前をつけます:

const Dashboard = lazy(() =>
  import(/* webpackChunkName: "dashboard" */ './pages/Dashboard')
)

---

4. ファーストビュー下の重いコンポーネントを遅延ロード

影響度: 高 — より高速な LCP のため初期バンドルを削減。

初期表示時に表示されないコンポーネント(モーダル、チャート、エディター、マップ)は遅延ロードすべきです。

import { lazy, Suspense, useState } from 'react'

const RichTextEditor = lazy(() => import('./components/RichTextEditor'))
const ChartPanel = lazy(() => import('./components/ChartPanel'))

function ArticlePage() {
  const [editing, setEditing] = useState(false)

  return (
    <article>
      <h1>記事タイトル</h1>
      <p>すぐに表示されるコンテンツ...</p>

      {editing && (
        <Suspense fallback={<EditorSkeleton />}>
          <RichTextEditor />
        </Suspense>
      )}

      <Suspense fallback={<ChartSkeleton />}>
        <ChartPanel />
      </Suspense>
    </article>
  )
}

---

5. 第三者スクリプトを遅延実行

影響度: 高 — アナリティクス、トラッキング、ウィジェットは初期レンダリングをブロックしません。

重要でない第三者スクリプトはページが操作可能になった後にロードします。

避けるべき — 初期レンダリングをブロック:

// main.tsx
import * as Sentry from '@sentry/react'
import posthog from 'posthog-js'

Sentry.init({ dsn: '...' })
posthog.init('...')

推奨 — ハイドレーション/マウント後にロード:

// main.tsx — アイドル時に遅延
function initThirdParty() {
  import('@sentry/react').then(Sentry => {
    Sentry.init({ dsn: import.meta.env.VITE_SENTRY_DSN })
  })
  import('posthog-js').then(({ default: posthog }) => {
    posthog.init(import.meta.env.VITE_POSTHOG_KEY)
  })
}

if ('requestIdleCallback' in window) {
  requestIdleCallback(initThirdParty)
} else {
  setTimeout(initThirdParty, 2000)
}

外部スクリプトタグの場合、defer を使用するか動的に挿入します:

function loadScript(src: string) {
  const script = document.createElement('script')
  script.src = src
  script.async = true
  document.body.appendChild(script)
}

---

6. ユーザーインテントでのクリティカルアセットのプリロード

影響度: 中 — ナビゲーションでの遅延感を解消。

ユーザーがクリックするのを待つのではなく、インテント(ホバー、フォーカス)を示した時点でルートのコードをロードし始めます。

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  const preload = () => {
    // Vite は動的インポート用のモジュールプリロードを作成
    switch (to) {
      case '/dashboard':
        import('./pages/Dashboard')
        break
      case '/settings':
        import('./pages/Settings')
        break
    }
  }

  return (
    <Link to={to} onMouseEnter={preload} onFocus={preload}>
      {children}
    </Link>
  )
}

HTML head の <link rel="modulepreload"> の場合:

<!-- クリティカルなルートチャンクをプリロード -->
<link rel="modulepreload" href="/assets/Home-abc123.js" />

Vite はエントリチャンク用の <link rel="modulepreload"> を自動的に追加します。ユーザーが次に訪問することが判明しているルートのためにプリロードを手動で追加します。

---

7. 依存関係の事前バンドリングを設定

影響度: 中 — より高速な開発サーバーのスタートアップとページロード。

Vite は esbuild を使用して node_modules 依存関係を事前バンドルします。エッジケースに対応するために設定します。

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    // これらを事前バンドルするよう強制(CJS 依存関係や深いインポートに有用)
    include: [
      'react',
      'react-dom',
      'react-router-dom',
      '@tanstack/react-query',
      'date-fns/format',
      'date-fns/parseISO',
    ],
    // これらの事前バンドリングをスキップ(既に ESM、または問題の原因)
    exclude: ['@vite-pwa/assets-generator'],
  },
})

開発環境で多くの小さなリクエストにより遅いページロードが見られる場合、通常は依存関係が事前バンドルされていません。include に追加します。

---

8. 圧縮を有効化

影響度: 中 — 転送サイズを 60～80% 削減。

Vite はデフォルトでは圧縮しません。本番環境用の圧縮プラグインを追加します。

// vite.config.ts
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    viteCompression({ algorithm: 'gzip' }),
    viteCompression({ algorithm: 'brotliCompress' }),
  ],
})

これはアセットの横に .gz と .br ファイルを生成します。サーバー(Nginx、Cloudflare、Vercel)を設定してそれらを提供します。

---

9. バンドルを定期的に分析

影響度: 参考 — サイズ回帰を本番前に検出。

重大な依存関係変更後にバンドルビジュアライザーを実行します。

npx vite-bundle-visualizer

またはビルドスクリプトに追加:

{
  "scripts": {
    "build": "vite build",
    "analyze": "vite build && npx vite-bundle-visualizer"
  }
}

確認すべき事項:

• gzip 圧縮時に 200KB 以上のチャンク — 分割を検討
• 複数のチャンク内にロードされている重複ライブラリ
• 数個の関数のみが使用されているのに全ライブラリがロードされている
• 動的インポート可能な node_modules コード

---

10. 不要コード削除のため import.meta.env を使用

影響度: 低～中 — 本番環境で未使用のコードパスを削除。

Vite はビルド時に import.meta.env.* を置換し、Rollup で不要な分岐をツリーシェイクできます。

// このコードは完全に本番環境で削除されます
if (import.meta.env.DEV) {
  console.log('デバッグ情報:', data)
  window.__DEBUG_DATA__ = data
}

// ビルド時に削除される機能フラグ
if (import.meta.env.VITE_FEATURE_NEW_DASHBOARD === 'true') {
  // フラグが設定されているときのみ含まれる
  initNewDashboard()
}

.env ファイルでカスタム環境変数を定義:

# .env.production
VITE_FEATURE_NEW_DASHBOARD=true
VITE_API_URL=https://api.example.com

---

11. 画像と静的アセットを最適化

影響度: 中 — 画像は通常最大のアセットです。

Vite でアセット処理を設定:

// vite.config.ts
export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 4KB 未満のアセットを base64 でインライン化
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          // アセットをタイプ別に整理
          if (/\.(png|jpe?g|gif|svg|webp|avif)$/.test(assetInfo.name ?? '')) {
            return 'images/[name]-[hash][extname]'
          }
          if (/\.(woff2?|ttf|eot)$/.test(assetInfo.name ?? '')) {
            return 'fonts/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        },
      },
    },
  },
})

自動画像圧縮用に vite-plugin-image-optimizer を使用:

import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    react(),
    ViteImageOptimizer({
      png: { quality: 80 },
      jpeg: { quality: 80 },
      webp: { quality: 80 },
    }),
  ],
})

---

12. API 開発用に開発サーバープロキシを設定

影響度: 中 — CORS 問題を解決し、ローカル開発を簡素化。

Vite SPA は通常別のバックエンド API と通信します。開発時に API リクエストを転送するように server.proxy を設定し、CORS を回避し本番環境の URL パターンにマッチさせます。

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
      '/auth': {
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
      // リアルタイム機能の WebSocket サポート
      '/ws': {
        target: 'ws://localhost:3001',
        ws: true,
      },
    },
  },
})

アプリケーションコードで相対パス(fetch('/api/users'))を使用 — Vite の開発サーバーに到達し、バックエンドにプロキシします。本番環境では、リバースプロキシ(Nginx、Caddy)を設定して同じルーティングを行います。

---

13. vite-plugin-pwa で PWA サポートを追加

影響度: 中 — Vite SPA 用のオフライン機能、インストール性、キャッシュされたアセット。

オフラインサポートまたはインストール性が必要な SPA の場合、vite-plugin-pwa はサービスワーカー生成、プリキャッシング、マニフェスト作成を処理します。

// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg', 'robots.txt'],
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff',
        icons: [
          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\./,
            handler: 'NetworkFirst',
            options: { cacheName: 'api-cache', expiration: { maxEntries: 50 } },
          },
        ],
      },
    }),
  ],
})

更新を無声で行うべきアプリは registerType: 'autoUpdate' を使用します。ユーザーに更新通知を表示するには registerType: 'prompt' を使用します。

---

14. CSS 戦略を選択

影響度: 中 — Vite は複数の CSS アプローチをゼロコンフィグでサポート。

Vite は CSS Modules、PostCSS、プリプロセッサをそのまま処理します。ニーズに基づいて選択:

CSS Modules — スコープ付きスタイル、実行時コスト なし、Vite に組み込み:

// Button.module.css → 自動的にスコープ付き
import styles from './Button.module.css'

function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.primary}>{children}</button>
}

Tailwind CSS — ユーティリティファースト、Vite の PostCSS サポートで動作:

// vite.config.ts — プラグン不要、Tailwind は PostCSS を使用
// tailwindcss をインストールし、postcss.config.js を追加するだけ

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

CSS-in-JS の考慮: styled-components や Emotion などのライブラリは実行時オーバーヘッドを追加します。パフォーマンスを優先する Vite SPA の場合は、CSS Modules または Tailwind を推奨します。CSS-in-JS が必要な場合は、Vanilla Extract や Panda CSS のようなゼロランタイムオプションを検討します。

---

15. React Compiler を Vite プラグインとしてセットアップ

影響度: 高 — 自動メモ化で手動の useMemo、useCallback、React.memo を廃止。

React Compiler はコンポーネントを分析し、自動的にメモ化を挿入します。Vite プロジェクトでは Babel プラグインとして追加:

npm install -D babel-plugin-react-compiler

// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

有効にすると、手動の useMemo、useCallback、React.memo 呼び出しを段階的に削除できます — Compiler が自動的に処理します。テストスイートを実行して、有効化後の動作が保持されていることを確認します。

Compiler は React 19 が必要です。オプトインですし、段階的な導入を希望する場合はファイル単位で 'use memo' ディレクティブで有効化できます。

---

出典

patterns.dev のパターン — より広い React Web エンジニアリングコミュニティ向けの Vite 固有の最適化ガイダンス。