Vite

Vite とは

Vite (ヴィート、フランス語で「速い」) は、Evan You (Vue.js の作者) が 2020 年に開発した次世代フロントエンドツールチェーンである。開発時は ESM ネイティブのモジュール配信で高速な HMR を実現し、本番ビルドは Rollup で最適化する。webpack と比較して開発サーバーの起動が桁違いに速い。

webpack との比較

webpack との主な違いを以下に比較する。

観点	Vite	webpack
開発サーバー起動	数十ミリ秒	数秒〜数十秒
HMR (ホットリロード)	数十ミリ秒	数百ミリ秒〜秒
設定の複雑さ	シンプル	複雑 (loader, plugin)
TypeScript	ゼロコンフィグ	ts-loader or babel-loader
本番ビルド	Rollup	webpack
エコシステム	成長中	最も豊富

なぜ Vite は速いのか

開発時: バンドルしない

webpack は開発時も全モジュールをバンドルする。Vite はバンドルせず、ブラウザの ESM (import) を直接利用する。

webpack: 全ファイルをバンドル → ブラウザに配信 (遅い)
Vite:    ブラウザが import を要求 → そのファイルだけ変換して返す (速い)

HMR: 変更ファイルだけ更新

ファイルを変更すると、そのファイルだけをブラウザに送信する。webpack のように依存グラフ全体を再構築しない。

基本的な設定

基本的な設定のコード例を示す。

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:4000', // API プロキシ
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});

Vitest との統合

Vite の設定 (vite.config.ts) を Vitest がそのまま共有するため、テストの設定が最小限で済む。

// vitest.config.ts (vite.config.ts を拡張)
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

フレームワーク対応

フレームワーク対応を以下に示す。

フレームワーク	プラグイン
React	@vitejs/plugin-react
Vue	@vitejs/plugin-vue
Svelte	@sveltejs/vite-plugin-svelte
Solid	vite-plugin-solid

全体像を把握するには関連書籍も有用。