概要
Vite（ビート）は、フロントエンド開発で利用される次世代のビルドツールです。
従来のビルドツール（WebpackやParcelなど）に比べて、
圧倒的に速い開発環境を提供することを目的としています。
特に「開発サーバーの起動が速い」「ホットリロードが軽快」という点が特徴で、
VueやReactなどのモダンなフレームワークとよく組み合わせて利用されます。
正式名称
Vite（ビート）
略称
特になし
特徴
- 高速起動：従来のバンドル型ツールと違い、ESM（ES Modules）を利用してブラウザに直接配信するため、開発サーバーの起動が非常に速い。
- ホットリロード（HMR）が高速：コード変更を検知すると必要な部分だけを即座に更新。体感的にラグが少ない。
- 本番用ビルドも最適化：内部でRollupを利用して、本番環境向けには効率的にバンドル・最適化される。
- モダンフレームワーク対応：Vue・Reactをはじめ、Svelte・Preactなど幅広いフレームワークに対応。
- プラグインエコシステム：Rollup互換のプラグインを利用可能で、拡張性が高い。
- TypeScriptやCSSの標準サポート：設定不要でTypeScriptやPostCSSが使える。
具体例
- Reactプロジェクトでの利用
npm create vite@latest my-app
cd my-app
npm install
npm run dev上記コマンドで、数秒以内にReactの開発環境が立ち上がり、コード変更も即座にブラウザに反映されます。
- Vueプロジェクトでの利用
Vue公式もViteを推奨しており、Vue CLIの代替として使われることが増えています。
関連用語
| 用語 | 解説 |
|---|---|
| Webpack（ウェブパック） | 従来主流のJavaScriptモジュールバンドラ。 |
| Rollup（ロールアップ） | JavaScriptバンドラで、Viteの本番ビルドで利用されている。 |
| ESM（ES Modules） | JavaScriptの標準モジュール仕様。Viteの高速化の仕組みの基盤。 |
| HMR（Hot Module Replacement） | 変更された部分だけを再読み込みする仕組み。 |
| Parcel（パーセル） | Viteと同じくゼロ設定で始められるビルドツール。 |