Viteは2020年、Vue.js作者のEvan Youが公開した次世代フロントエンドビルドツールです。「ヴィート」と読み、フランス語で「速い」を意味する単語が由来。Webpackの「全部バンドルしてから起動」モデルを捨て、開発時はネイティブESモジュールでオンデマンドに読み込む新方式で、起動・ホットリロードの体感速度が桁違いに改善されました。
この記事の目次
- Viteの設計の革新
- 本番ビルドはRollup（v6からRolldownへ）
- Viteの対応フレームワーク
- Vite と Webpack の選び分け
- まとめ
Viteの設計の革新
Webpackは「全部一度バンドルしてから配信」する設計のため、プロジェクト規模が大きくなるほど開発サーバの起動と変更反映が遅くなりがちでした。Viteはブラウザのネイティブ ESM サポートを前提に「必要なモジュールだけオンデマンドで配信」する方式に切り替え、起動を桁違いに高速化。
依存パッケージ（node_modules）の事前バンドルにはesbuild（Go製）を使い、これも従来比 10〜100倍速い。結果として、大規模Reactアプリでも開発サーバ起動が1〜2秒、ホットリロードがほぼ瞬時という体験になります。
本番ビルドはRollup（v6からRolldownへ）
Viteは「開発時は爆速、本番は最適化されたバンドル」の両立を目指しています。本番ビルドは長らくRollupを内部で使ってきましたが、Vite 6 以降はRust製の Rolldown（同じくEvan You チーム製）への移行が進んでいます。
「開発はesbuild（Go）、本番はRollup（JS）→ 将来Rolldown（Rust）」と、エンジン部分にネイティブ言語ツールを多用するのが Viteの設計哲学。JavaScript/TypeScriptのビルドエコシステム自体が、JS実装からネイティブ実装へと大きく移り変わる時代の象徴です。
Viteの対応フレームワーク
Viteは特定のフレームワークに依存しない汎用ビルドツールで、Vue、React、Svelte、Solid、Preactなど主要フロントエンドフレームワークで使えます。Vue公式テンプレート、Reactのcreate-vite、SvelteKitなどは標準でViteを採用しています。
Astro、Nuxt 3、SolidStartなどのメタフレームワークも内部でViteを使っており、「現代Webフロントエンド開発のビルド基盤」として広く採用されている状況です。Next.jsだけは内製のTurbopackへ移行中で、独自路線を進んでいます。
Vite と Webpack の選び分け
新規プロジェクトのフロントエンドビルドツールは、現代では Vite が第一候補。「速くて設定がシンプル」というメリットは大きく、特に開発体験が大幅に向上します。
ただし既存の大規模Webpackプロジェクトを移行するのは大仕事で、Module Federation等の特殊機能を使っている場合は維持の判断もあり。Next.js は独自路線（Turbopack）を進んでいるため、Next.jsを使うなら自然と Turbopack の世界に入る、というのが現代の状況です。
まとめ
Viteはフロントエンド開発のビルド体験を一新した革新的ツールで、今後のJS生態系の標準ビルダーになる勢いです。新規プロジェクトの第一選択肢として、迷ったらまずViteから検討する時代になりました。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント