この記事は、ラクスパートナーズ AdventCalendar 2025の8日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
本日はフロントエンドの開発に欠かせない存在となっているビルドツールののVite（ヴィート）についてまとめていきたいと思います。
Viteとは？
公式サイトの言葉を借りると、
Vite は、次世代の Web アプリケーションを支える超高速フロントエンドビルドツール
です。
https://ja.vite.dev/
次のような特徴があります。
開発環境のビルドが速い
Vite（フランス語で「素早い」という意味）の名の通り、とにかく開発環境のビルド速度が速いです。ビルドが速い理由は、以下2点が関係しています。
esbuildを使用している
Viteは内部的に esbuild（Go言語で開発されたバンドラー）を使用しています。esbuildを使って依存関係の事前バンドルを行なっており、その速さはJavaScriptベースよりも10 倍から100倍高速だとされています。
こちらの図はesbuild公式から引用したもので、
「three.jsライブラリの10個のコピーからなるプロダクションバンドルをゼロから作成するのにかかる時間」
をwebpack5などの他のビルドツールと比較しています。
他のツールが数十秒かかっている中、esbuildは0.39秒で処理を完了させているので、とんでもなく速いことが伺えます。
必要な時に必要なモジュールだけを返す仕組み
Viteは、ネイティブES Moduleを使用します。
ES Moduleとは
import React, { useState } from 'react'
といった形で、importやexportを使ってモジュールを読み込む仕様のことです。ブラウザ側はこのES Moduleを直接理解できるようになっています。
Viteでは、開発時にバンドルを行わず、ブラウザのリクエストに応じて、必要なソースコードだけをCommonJSやUMDからES Moduleに変換する仕組みとなっています。
つまり、必要な時に必要なモジュールだけを返しており、ブラウザ側も返されたモジュールを直接読み込むことができるので、高速な開発環境を実現しています。
以上が、Viteのビルド速度が速い理由となります。
Hot Module Replacement
ViteはネイティブES Moduleを使用してHMR APIを提供しているので、ページをリロードすることなく即座に変更を画面に反映することができます。
本番環境のビルドが最適化されている
開発環境での依存関係の事前バンドルにはesbuildが使用されていますが、本番環境のビルドにはRollupを用いています。
esbuildの方が速いのですが、現在のViteのプラグインAPIとは互換性がないそうです。Rollupの方がパフォーマンスと柔軟性に優れているため、本番環境においてはこちらが採用されているとのことでした。
ちなみに、現在Viteはrolldown-viteというパッケージが使える（2025/12/5時点ではExperimental）ようになっており、Rolldownというバンドラーをデフォルトバンドラーとして採用する運びのようです。
先ほどesbuildは速さが特徴だとご説明しましたが、フロントエンド側のプロジェクトが大規模なものになってくるとだんだん重くなり、厳しくなるそうです。
rolldown-viteに切り替えると、特に大規模なプロジェクトのビルド時間が短縮されるとアナウンスされていたので、興味のある方は試してみてください（rolldown-viteを使う方法については、この後の使い方の項目でご説明します）。
使い方
以下のコマンドを入力するだけで、プロジェクトを生成してくれます。
npm create vite@latest
Project name:
│ vite-project
│
◇ Select a framework:
│ Vue
│
◇ Select a variant:
│ JavaScript
│
◇ Use rolldown-vite (Experimental)?:
│ No
│
◇ Install with npm and start now?
│ Yes
上から
- プロジェクト名
- フレームワーク
- 言語
- rolldown-viteを使用するか
- npmで開始するか
を選択します。
全て終了すると、選択した内容でプロジェクトを作成してくれます。
まとめ
- 開発環境のビルドが速い
- 変更が即座に反映される
- 本番環境のビルドが最適化されている（rolldown-viteが標準化すればさらにビルドの時間が短縮される）
という特徴をもったViteについてまとめてみました。
私も現場でViteを導入しているプロジェクトに関わっていますが、開発環境でのビルドの速度が圧倒的に違うと感じています（ローカルサーバーの立ち上げが一瞬で終わった時は驚きました）。
既存のプロジェクトをViteに置き換えることも可能なので、まだViteを試されたことがない方はぜひ導入を検討してみてください。
ここまで読んでいただきありがとうございました。