React + Vite ベストプラクティス

Vite で構築された React アプリケーションの包括的なパフォーマンス最適化ガイド。ビルド最適化、コード分割、開発パフォーマンス、アセット処理、環境設定、バンドル分析の 6 つのカテゴリにわたる 23 のルールを含みます。

メタデータ

• Version: 2.0.0
• Framework: React + Vite
• Rule Count: 6 つのカテゴリにわたる 23 のルール
• License: MIT

適用時期

以下の場合にこれらのガイドラインを参照してください：

• React プロジェクト用に Vite を設定する
• コード分割とレイジーロードを実装する
• ビルド出力とバンドルサイズを最適化する
• 開発環境と HMR をセットアップする
• 画像、フォント、SVG、静的アセットを処理する
• 環境間で環境変数を管理する
• バンドルサイズと依存関係を分析する

ルールカテゴリ（優先度別）

優先度	カテゴリ	インパクト	プレフィックス
1	ビルド最適化	重大	build-
2	コード分割	重大	split-
3	開発	高	dev-
4	アセット処理	高	asset-
5	環境設定	中	env-
6	バンドル分析	中	bundle-

クイックリファレンス

1. ビルド最適化（重大）

• build-manual-chunks - ベンダー分離用にマニュアルチャンクを設定
• build-minification - OXC（デフォルト）または Terser によるミニフィケーション
• build-target-modern - モダンブラウザをターゲット（baseline-widely-available）
• build-sourcemaps - 環境ごとにソースマップを設定
• build-tree-shaking - ESM を使用して適切なツリーシェーキングを確保
• build-compression - Gzip と Brotli 圧縮
• build-asset-hashing - キャッシュ破棄用のコンテンツベースハッシング

2. コード分割（重大）

• split-route-lazy - React.lazy() を使用したルートベース分割
• split-suspense-boundaries - 戦略的な Suspense 境界の配置
• split-dynamic-imports - 重いコンポーネント用の動的 import()
• split-component-lazy - 非重要コンポーネントのレイジーロード
• split-prefetch-hints - ホバー/アイドル/ビューポート時のチャンクプリフェッチ

3. 開発（高）

• dev-dependency-prebundling - 高速スタート用に optimizeDeps を設定
• dev-fast-refresh - React Fast Refresh パターン
• dev-hmr-config - HMR サーバー設定

4. アセット処理（高）

• asset-image-optimization - 画像最適化とレイジーロード
• asset-svg-components - SVGR を使用した SVG を React コンポーネントとして
• asset-fonts - Web フォント読み込み戦略
• asset-public-dir - Public ディレクトリ vs JavaScript インポート

5. 環境設定（中）

• env-vite-prefix - クライアント変数の VITE_ プレフィックス
• env-modes - モード固有の環境ファイル
• env-sensitive-data - クライアントコードでシークレットを公開しない

6. バンドル分析（中）

• bundle-visualizer - rollup-plugin-visualizer を使用したバンドル分析

必須設定

推奨 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  build: {
    target: 'baseline-widely-available',
    sourcemap: false,
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },

  optimizeDeps: {
    include: ['react', 'react-dom'],
  },

  server: {
    port: 3000,
    hmr: {
      overlay: true,
    },
  },
})

ルートベースのコード分割

import { lazy, Suspense } from 'react'

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

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      {/* Routes here */}
    </Suspense>
  )
}

環境変数

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

使用方法

詳細な説明とコード例については、個別のルールファイルを参照してください：

rules/build-manual-chunks.md
rules/split-route-lazy.md
rules/env-vite-prefix.md

リファレンス

• Vite Documentation
• React Documentation
• Rollup Documentation

完全なコンパイル済みドキュメント

すべてのルールが展開された完全なガイド：AGENTS.md