Viteとは何か - 高速なフロントエンドbuildツールを解説

Viteはフロントエンドのbuildツールです。開発時にはネイティブESモジュールでソースを配信して即座に起動し、本番向けにはRollupでバンドルします。

Vite（フランス語で「速い」の意）は、開発サーバーの体験を再考しました。すべてを事前にバンドルする代わりに、ソースをネイティブESモジュールとして配信し、ファイルを必要に応じて変換するため、大規模なアプリでも開発サーバーが即座に起動します。本番向けには最適化されたRollup bundleを生成します。

Viteとは

Viteはモダンなwebプロジェクト向けのbuildツール兼開発サーバーです。開発時にはブラウザのネイティブESモジュールサポートに加えて高速な変換のためにesbuildを活用し、ほぼ即座のサーバー起動とhot module replacementを提供します。本番向けにはRollupでバンドルし、minificationと最適化を適用します。

動作の仕組み

開発時、Viteはアプリをバンドルしません。ブラウザが直接モジュールをリクエストし、Viteがそれぞれをその場でesbuildを使って変換します。esbuildはGoで書かれており、極めて高速です。速度のためにサードパーティの依存関係はesbuildで一度だけ事前バンドルします。本番buildではRollupに切り替えて、最適化されツリーシェイクされた出力を生成します。

config例

設定は最小限で、多くの場合pluginを1つ指定するだけです。

A minimal vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: { sourcemap: true }
});

CI/CDでの役割

CIでは「vite build」がデプロイ用の本番bundleを生成します。esbuild駆動の変換のおかげでbuildは高速ですが、大規模なアプリではnode_modulesや永続的なbuild cacheを実行間でcacheすることで依然として恩恵があります。Viteはbuild中に型チェックを行わないため、型チェックは通常pipeline内の別の「tsc」ステップになります。

代替手段

Webpackはより古く、より設定可能なバンドラーで、大規模なアプリでは依然として一般的です。Parcelはゼロコンフィグのバンドルを提供します。TurbopackとRspackはより新しい高速なバンドラーです。Viteはその開発速度と妥当なデフォルトのおかげで、新規フロントエンドプロジェクトのデフォルトとなっています。

重要なポイント

Viteは開発時にネイティブESモジュールを配信し、即座の起動とHMRを実現します。
変換にはesbuildを、本番bundleにはRollupを使います。
CIでは「vite build」は高速で、型チェックは別の「tsc」ステップとして実行します。