Vite

Vite とは

Vite (ヴィート、フランス語で「速い」) は、Evan You (Vue.js の作者) が 2020 年に開発した次世代フロントエンドツールチェーンである。開発時は ESM ネイティブのモジュール配信で高速な HMR を実現し、本番ビルドは Rollup で最適化する。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

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