Vite（ヴィート）

Viteとは？

Vite（ヴィート、フランス語で「速い」の意）は、Vue.jsの作者Evan You氏が開発したモダンなフロントエンドビルドツールです。開発時はネイティブESモジュール（ESM）を活用してバンドルを省略し、変更ファイルのみを即時更新するHMRで高速な開発体験を提供します。

Webpackとの比較

項目	Webpack	Vite
開発サーバー起動	全ファイルをバンドル（遅い）	ESMで即時起動（速い）
HMR速度	ファイル数増加で遅くなる	常に高速
ビルド（本番）	Webpack	Rollup
設定	複雑	シンプル

対応フレームワーク

• React（@vitejs/plugin-react）
• Vue（@vitejs/plugin-vue）
• Svelte（@sveltejs/vite-plugin-svelte）
• Vanilla JS / TypeScript

基本的な使い方

# プロジェクト作成
npm create vite@latest my-app -- --template react-ts

# 開発サーバー起動
npm run dev

# 本番ビルド
npm run build

まとめ

ViteはCreate React AppやVue CLIの後継として急速に普及しています。新規フロントエンドプロジェクトでは、特別な理由がない限りViteを選択することを推奨します。