vite

Vite - クイックリファレンス

このスキルを使用する場合

• React／Vue／Svelte プロジェクトをセットアップする
• 開発サーバーとプロキシを設定する
• 本番ビルドを最適化する

詳細な知識：包括的なドキュメントを参照するには、technology: vite を指定して mcp__documentation__fetch_docs を使用してください。

このスキルを使用しない場合

• Webpack ベースのプロジェクト - webpack.config.js には webpack スキルを使用してください
• Next.js - 独自のビルドシステムを備えています（SWC／Turbopack を使用）
• Create React App - 引き続き Webpack を使用します（移行を検討してください）
• Rollup のみを使用する場合 - ライブラリには Rollup を直接使用してください

基本的なパターン

セットアップ

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

基本設定

// 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'),
    }
  },

  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },

  build: {
    outDir: 'dist',
    sourcemap: true
  }
});

環境変数

# .env
VITE_API_URL=http://localhost:8080/api

// Usage
const apiUrl = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

// TypeScript types (vite-env.d.ts)
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
}

コード分割

// Dynamic imports
const AdminPanel = lazy(() => import('./AdminPanel'));

// Manual chunks
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  }
});

コマンド

コマンド	用途
npm run dev	HMR 対応の開発サーバー
npm run build	本番ビルド
npm run preview	ビルドのプレビュー

避けるべきアンチパターン

• 環境変数に VITE_ プレフィックスを付け忘れないでください
• 相対パスを使用しないでください（エイリアスを使用してください）
• チャンクサイズの警告を無視しないでください

アンチパターン

アンチパターン	問題点	正しい方法
環境変数に VITE_ プレフィックスがない	クライアントに公開されません	クライアント用のすべての変数に VITE_ プレフィックスが必要です
相対インポート	リファクタリングが難しくなります	パスエイリアス（@/...）を使用してください
チャンクサイズの警告を無視する	初期バンドルが大きくなります	手動チャンクまたは遅延読み込みを使用してください
設定に TypeScript を使用しない	型ヒントが不足します	'vite' の defineConfig を使用してください
開発環境と本番環境を分離しない	両環境で同じ設定になります	環境ごとの .env ファイルを使用してください
public フォルダーが大きい	ビルドが遅くなります	public/ には静的アセットのみを配置してください

よくある問題の解決方法

問題	原因	解決策
環境変数が undefined になる	VITE_ プレフィックスがない	VITE_API_URL に変更してください
HMR が動作しない	プロキシ設定	server.hmr の設定を確認してください
動的インポートでビルドが失敗する	構文が正しくない	require() ではなく import() を使用してください
開発サーバーが遅い	依存関係が多すぎる	optimizeDeps.include に追加してください
リフレッシュ時に 404（SPA）	フォールバックがない	server.historyApiFallback を追加してください
開発環境で CORS エラーが発生する	プロキシ設定が正しくない	server.proxy を正しく設定してください

本番環境への対応

ビルドの最適化

// vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    splitVendorChunkPlugin(),
    visualizer({ open: true }), // Bundle analysis
  ],

  build: {
    target: 'es2020',
    minify: 'esbuild',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
    chunkSizeWarningLimit: 500,
  },

  // Optimize deps
  optimizeDeps: {
    include: ['react', 'react-dom'],
    exclude: ['@some/heavy-package'],
  },
});

セキュリティ設定

// vite.config.ts
export default defineConfig({
  // Never expose server-only vars
  define: {
    'process.env.API_SECRET': 'undefined',
  },

  server: {
    // CORS for dev
    cors: {
      origin: 'http://localhost:3000',
      credentials: true,
    },
    // Proxy to avoid CORS issues
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false,
      },
    },
  },

  // Preview server (for testing prod builds)
  preview: {
    port: 4173,
    strictPort: true,
  },
});

// Type-safe env vars
// env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
  // Add all VITE_ prefixed vars here
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

パフォーマンス

// vite.config.ts
export default defineConfig({
  build: {
    // CSS code splitting
    cssCodeSplit: true,

    // Asset inlining threshold (4kb)
    assetsInlineLimit: 4096,

    // Terser for smaller bundles (slower build)
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

  // Enable compression
  plugins: [
    react(),
    compression({ algorithm: 'gzip' }),
    compression({ algorithm: 'brotliCompress', ext: '.br' }),
  ],
});

// Lazy loading routes
// router.tsx
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

const routes = [
  {
    path: '/dashboard',
    element: (
      <Suspense fallback={<Loading />}>
        <Dashboard />
      </Suspense>
    ),
  },
];

テスト設定

// vite.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules/', 'src/test/'],
    },
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
});

// src/test/setup.ts
import '@testing-library/jest-dom';
import { vi } from 'vitest';

// Mock environment variables
vi.stubEnv('VITE_API_URL', 'http://localhost:8080');

CI/CD の統合

# .github/workflows/build.yml
name: Build

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - run: npm ci

      - name: Type check
        run: npm run typecheck

      - name: Lint
        run: npm run lint

      - name: Test
        run: npm run test:coverage

      - name: Build
        run: npm run build

      - name: Upload coverage
        uses: codecov/codecov-action@v4

監視指標

指標	目標
バンドルサイズ（gzip）	< 200KB
初期読み込み時間	< 2s
ビルド時間	< 60s
Lighthouse のパフォーマンス	> 90

チェックリスト

• 型安全な環境変数
• 大きな依存関係に対する手動チャンク
• visualizer によるバンドル分析
• ルートの遅延読み込み
• CSS コード分割を有効化
• 圧縮（gzip/brotli）
• 本番環境で console を削除
• ソースマップを有効化
• カバレッジ付きで Vitest を設定
• CI/CD パイプライン

関連資料

高度な設定については、mcp__documentation__fetch_docs を参照してください

• 技術：vite
• Vite ドキュメント