react-vite-best-practices

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

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

メタデータ

• バージョン： 2.0.0
• フレームワーク： React + Vite
• ルール数： 6 カテゴリーにわたる 23 のルール
• ライセンス： MIT

適用する場面

次のような場合に、これらのガイドラインを参照してください：

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

優先度別のルールカテゴリー

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

クイックリファレンス

1. ビルドの最適化（CRITICAL）

• 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. コード分割（CRITICAL）

• split-route-lazy - React.lazy() によるルートベースの分割
• split-suspense-boundaries - Suspense 境界を適切に配置する
• split-dynamic-imports - 重いコンポーネントに dynamic import() を使用する
• split-component-lazy - 重要でないコンポーネントを遅延読み込みする
• split-prefetch-hints - ホバー時／アイドル時／ビューポート内でチャンクを先読みする

3. 開発（HIGH）

• dev-dependency-prebundling - 起動を高速化するよう optimizeDeps を設定する
• dev-fast-refresh - React Fast Refresh のパターン
• dev-hmr-config - HMR サーバーの設定

4. アセットの処理（HIGH）

• asset-image-optimization - 画像の最適化と遅延読み込み
• asset-svg-components - SVGR を使って SVG を React コンポーネントとして扱う
• asset-fonts - Web フォントの読み込み戦略
• asset-public-dir - public ディレクトリと JavaScript インポートの使い分け

5. 環境設定（MEDIUM）

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

6. バンドル分析（MEDIUM）

• 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 のドキュメント
• React のドキュメント
• Rollup のドキュメント

完全版ドキュメント

すべてのルールを含む完全なガイドについては、AGENTS.md を参照してください。