vite

Vite 7

React プロジェクト向けのビルドツールと開発サーバーです。Vite 7（2025 年 6 月）は ESM のみをサポートし、Node.js 20.19+ / 22.12+ が必要です。また、ブラウザーのターゲットはデフォルトで baseline-widely-available です。ユーザーのスタックでは、rolldown-vite（Rust ベースのドロップイン置き換え）、@vitejs/plugin-react、@tailwindcss/vite、@tanstack/router-plugin、@cloudflare/vite-plugin、@tanstack/react-start を使用しています。

重要なルール

プラグインの順序が重要です

TanStack Start または TanStack Router のプラグインは、@vitejs/plugin-react より前に配置する必要があります。

plugins: [
  tanstackStart(),      // or tanstackRouter() for SPA
  tailwindcss(),
  react(),              // ALWAYS last among framework plugins
]

順序を誤ると、ルート生成の失敗や HMR の不具合が発生します。

Vite 7 は ESM のみです

Vite 7 は ESM のみで配布されます。vite.config.ts では import/export 構文を使用する必要があります。設定ファイルでは CJS の require() はサポートされていません。Node.js 20.19+ は require(esm) をネイティブにサポートしているため、Vite は引き続き CJS の利用側から require できます。

tailwind.config.js は作成しないでください

Tailwind CSS v4 は CSS ファーストの設定方式を採用しています。tailwind.config.js/tailwind.config.ts は作成しないでください。@tailwindcss/vite プラグインを使用し、CSS 内で @theme、@utility、@plugin を使って設定してください。

環境変数には VITE_ プレフィックスが必要です

VITE_ が付いた変数のみ、import.meta.env を介してクライアントコードに公開されます。サーバー専用のシークレットには、このプレフィックスを付けないでください。型安全性を確保するには、vite-env.d.ts で ImportMetaEnv を拡張してください。

splitVendorChunkPlugin は削除されました

Vite 7 で削除されました。独自のチャンク分割には build.rollupOptions.output.manualChunks を使用してください。

設定

vite.config.ts（TanStack Start を使ったフルスタック構成）

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    tanstackStart(),
    cloudflare(),
    tailwindcss(),
    react(),
  ],
  resolve: {
    alias: {
      '@': new URL('./src', import.meta.url).pathname,
    },
  },
})

vite.config.ts（TanStack Router を使った SPA）

import { defineConfig } from 'vite'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    tanstackRouter({ autoCodeSplitting: true }),
    tailwindcss(),
    react(),
  ],
  resolve: {
    alias: {
      '@': new URL('./src', import.meta.url).pathname,
    },
  },
})

React Compiler

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

インストール：pnpm add -D babel-plugin-react-compiler。コンポーネントとフックを自動でメモ化するため、useMemo/useCallback を手動で使う必要はありません。

パスエイリアス

ESM に対応した解決には import.meta.url を使用してください（ESM では __dirname は使えません）。

resolve: {
  alias: {
    '@': new URL('./src', import.meta.url).pathname,
  },
}

tsconfig.json にも同じ設定を追加してください："paths": { "@/*": ["./src/*"] }

環境変数

ファイル：.env、.env.local、.env.[mode]、.env.[mode].local。VITE_ プレフィックスが付いた変数のみ、クライアントに公開されます。組み込み定数：import.meta.env.MODE、.DEV、.PROD、.SSR、.BASE_URL。

src/vite-env.d.ts での型拡張：

interface ImportMetaEnv {
  readonly VITE_API_URL: string
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

プラグインエコシステム

@vitejs/plugin-react

Fast Refresh（React 用 HMR）、JSX 変換、オプションの Babel プラグインパイプラインを提供します。フレームワークプラグインの中で、常に最後に配置してください。

import react from '@vitejs/plugin-react'

react()                          // zero-config default
react({ fastRefresh: false })    // disable for debugging HMR issues

@tailwindcss/vite

Tailwind CSS v4 向けの Vite ネイティブ統合です。PostCSS ベースの設定に代わるため、postcss.config.js は不要です。

import tailwindcss from '@tailwindcss/vite'

tailwindcss()  // zero-config, reads @theme from CSS

@tanstack/router-plugin/vite

TanStack Router 向けのファイルベースのルート生成機能です。react() より前に配置する必要があります。

import { tanstackRouter } from '@tanstack/router-plugin/vite'

tanstackRouter({ autoCodeSplitting: true })

@tanstack/react-start/plugin/vite

TanStack Start 向けのフルスタックプラグインです。内部にルータープラグインが含まれているため、両方を追加しないでください。

import { tanstackStart } from '@tanstack/react-start/plugin/vite'

tanstackStart()                           // default SSR
tanstackStart({ spa: { enabled: true } }) // SPA mode (no SSR)

@cloudflare/vite-plugin

開発時に Worker コードを workerd 内で実行し、本番環境と同じ動作を実現します。ランタイム統合には Vite の Environment API を使用します。

import { cloudflare } from '@cloudflare/vite-plugin'

cloudflare()  // reads wrangler.jsonc by default

// Programmatic config (no wrangler file needed)
cloudflare({
  config: {
    name: 'my-worker',
    compatibility_flags: ['nodejs_compat'],
  },
})

開発サーバー

プロキシ設定

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8787',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
    '/ws': { target: 'ws://localhost:8787', ws: true },
  },
}

HMR のトラブルシューティング

症状	対処方法
HMR ではなくページ全体が再読み込みされる	plugin-react が読み込まれていることを確認する
HMR が接続されない	リバースプロキシの背後にある場合は server.hmr.clientPort を設定する
編集後に状態が古いままになる	コンポーネントからエクスポートするコンポーネントを 1 つだけにする
CSS が更新されない	プラグインに @tailwindcss/vite が含まれていることを確認する

リバースプロキシの背後にある場合：

server: {
  hmr: { protocol: 'ws', host: 'localhost', port: 5173, clientPort: 443 },
}

ファイルのウォームアップ

server: {
  warmup: {
    clientFiles: ['./src/components/*.tsx', './src/routes/__root.tsx'],
  },
}

ビルドの最適化

デフォルトのブラウザーターゲット

Vite 7 のターゲットは baseline-widely-available です（Chrome 107+、Edge 107+、Firefox 104+、Safari 16+）。変更するには、build.target: 'es2020' または ['chrome90', 'safari14'] を指定します。

手動チャンク

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom'],
        'tanstack': ['@tanstack/react-router', '@tanstack/react-query'],
      },
    },
  },
}

関数による動的分割：

manualChunks(id) {
  if (id.includes('node_modules')) {
    if (id.includes('react')) return 'react-vendor'
    if (id.includes('@tanstack')) return 'tanstack'
    return 'vendor'
  }
}

バンドル分析

pnpm add -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

// Add to plugins array
visualizer({ filename: 'stats.html', open: true, gzipSize: true })

チャンク分割戦略、CSS の分割、アセットのインライン化、ソースマップ、パフォーマンス調整の詳細については、ビルド最適化を参照してください。

Rolldown の統合

rolldown-vite とは

rolldown-vite は、Vite チームが開発した Rust ベースの Vite バンドラーのドロップイン置き換えです（VoidZero のスポンサー提供）。esbuild と Rollup の両方を、Rolldown と Oxc ツールキットを基盤とする単一の高性能ツールに置き換えます。ビルド時間が 3～16 倍短縮され、大規模なプロジェクトではメモリ使用量が最大 100 分の 1 に削減された事例が報告されています。

Rolldown は Vite 8（現在ベータ版）でデフォルトのバンドラーになる予定です。今 rolldown-vite を使うことで、プロジェクトを移行に備えられます。

注意： Vite 7 との互換性には Vitest 3.2 以降が必要です。それより前のバージョンの Vitest は動作しません。

インストール

package.json で vite を rolldown-vite にエイリアスします。

{
  "devDependencies": {
    "vite": "npm:rolldown-vite@latest"
  }
}

モノレポや、Vite を peer dependency として使うフレームワークでは、overrides を使用します。

{
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }
}

次に pnpm install を実行します。設定の変更は不要です。ドロップイン置き換えとして利用できます。

標準の Vite との主な違い

• esbuild への依存なし - すべての変換と圧縮を Oxc が処理します（設定には引き続き minify: 'esbuild' と表示されますが、内部エンジンは Oxc です）
• より高速なビルド - Rust ネイティブのバンドリングにより、特に大規模なプロジェクトで高速化します
• 同じプラグイン API - ほとんどの場合、Rollup/Vite プラグインは変更なしで動作します
• パッチバージョンで動作が変わる場合があります - rolldown-vite は Vite のメジャー／マイナーバージョンに追従しますが、パッチバージョンは独立しています

互換性に関する注意

ほとんどのフレームワークと Vite プラグインは、追加設定なしで動作します。既知の問題と変更履歴については、rolldown-vite リポジトリを確認してください。移行期間中は、サポートされていないオプションに関する警告が表示される場合があります。

環境 API

Vite 6 で導入され、Vite 7 では buildApp フックによって改良された実験的な API です。単一の Vite 設定から複数のターゲット（ブラウザー、Node.js、エッジランタイム）向けのビルドを可能にします。

仕組み

各環境は、それぞれ独自のモジュールグラフ、プラグインパイプライン、ビルド設定を持ちます。@cloudflare/vite-plugin はこれを利用して、開発時に Worker コードを workerd 内で実行し、本番環境での動作を再現します。

buildApp フック（Vite 7）

フレームワークが複数の環境のビルドを調整します。設定レベルでの形式（最も一般的）：

export default defineConfig({
  builder: {
    async buildApp(builder) {
      await builder.build(builder.environments.client)
      await builder.build(builder.environments.server)
    },
  },
})

プラグインフック形式（プラグイン開発者向け）：

{
  name: 'my-framework',
  buildApp: async (builder) => {
    const environments = Object.values(builder.environments)
    return Promise.all(
      environments.map((env) => builder.build(env))
    )
  },
}

マルチ環境設定

export default defineConfig({
  environments: {
    client: {
      build: { outDir: 'dist/client' },
    },
    server: {
      build: { outDir: 'dist/server' },
    },
  },
})

ほとんどのプロジェクトでは、@cloudflare/vite-plugin または @tanstack/react-start が環境設定を自動的に処理します。Environment API を直接使用するのは、フレームワーク開発者向けです。

デプロイ

Cloudflare Workers（TanStack Start 経由）

プラグインに cloudflare() を追加し、wrangler.jsonc を作成します。

// wrangler.jsonc
{
  "name": "my-app",
  "compatibility_date": "2025-01-01",
  "compatibility_flags": ["nodejs_compat"],
  "main": "./dist/server/index.js",
  "assets": { "directory": "./dist/client" }
}

pnpm vite build && pnpm wrangler deploy

静的 SPA

ビルドによって dist/ が生成されます。Cloudflare Pages、Vercel、Netlify など、任意の静的ホスティングサービスにデプロイできます。

プリレンダリング（SSG）

tanstackStart({ prerender: { enabled: true, crawlLinks: true } })

ベストプラクティス

1. プラグインの順序 - フレームワークプラグインを最初に、次にユーティリティ、最後に react()
2. rolldown-vite を使用する - ビルドが 3～16 倍高速なドロップイン置き換えです
3. 開発時に staleTime を設定する - HMR のリロード中に不要な再フェッチが発生しないようにします
4. 重要なファイルをウォームアップする - 頻繁にアクセスされるモジュールには server.warmup を使用します
5. ベンダーチャンクを分割する - キャッシュ用に react、@tanstack/* を安定したチャンクに分離します
6. transition-all は使用しない - CSS トランジションには個別のプロパティのみを指定します
7. ESM 設定ファイルでのパス解決には import.meta.url を使用する
8. バンドルを定期的に分析する - デプロイ前に rollup-plugin-visualizer を使用します
9. VITE_ プレフィックスのルールを守る - 公開してよい値のみに使用し、シークレットはサーバー関数に保存します
10. 本番環境では build.sourcemap を設定する - ソースを公開せずにエラーを追跡するには 'hidden' を指定します

Resources

• Vite Docs: https://vite.dev/guide/
• Vite 7 Blog: https://vite.dev/blog/announcing-vite7
• Migration Guide: https://vite.dev/guide/migration
• Build Options: https://vite.dev/config/build-options
• Server Options: https://vite.dev/config/server-options
• Env Variables: https://vite.dev/guide/env-and-mode
• Rolldown-Vite: https://voidzero.dev/posts/announcing-rolldown-vite
• Cloudflare Vite Plugin: https://developers.cloudflare.com/workers/vite-plugin/
• Plugin React: https://github.com/vitejs/vite-plugin-react
• GitHub: https://github.com/vitejs/vite