TL;DR
フロントエンドのビルドツール。ネイティブの ES Modules を使う開発サーバと、本番向けにコードをまとめるビルドコマンドの 2 つからなる。名前はフランス語で「速い」を意味し、「ヴィート」と読む。
なぜ必要か
開発中はブラウザのネイティブ ES Modules の上で動くので、HMR などの機能を使いながら素早く開発できる。本番用には、最適化された静的ファイルを出力するよう、あらかじめ設定されたビルドコマンドを使える。公式ドキュメントは、Vite が独自の方針を持ち、最初から妥当なデフォルト設定を備えていると説明している。
仕組み
開発中の Vite はサーバとして動き、プロジェクトのルートに置いた index.html がアプリケーションのエントリポイントになる。本番ビルドでは Rolldown でコードをバンドルする。フレームワークへの対応やツールとの連携は、プラグイン API で追加する。
例
npm create vite@latestテンプレートには vanilla、vue、react、preact、lit、svelte、solid、qwik があり、それぞれ TypeScript 版もある。Vue の単一ファイルコンポーネントと React の Fast Refresh には、公式の HMR 連携がある。Vitest は Vite を使うプロジェクトに最適化されたテストフレームワークである。SolidStart は Vite でクライアント向けとサーバ向けのビルドを生成し、SvelteKit も開発に Vite を使う。