Viteとは？

Vite(ヴィート)とは2020年にリリースされた割と新しいビルドツールで、フロントエンドのために作られたというだけあって幅広いフレームワークをサポートしています。

Viteはリリースされて以降年々シェアを広げており、State of JavaScript 2024におけるビルドツール部門ではViteの利用率がWebpackに差し迫っています。

今回はなぜViteが使われるのか、今まで覇権を握っていたWebpackと比較してみました。

WebpackにはないViteのメリット

開発が速い

これがViteを使う一番の理由だと思います。
開発が速いというのが具体的にどういうことかというと、

開発サーバー起動時のコールドスタートにかかる時間が短い
変更の反映にリロードが必要ない
変更反映時に変更ファイル以外の状態を保持する HMR (Hot Module Replacement) 機能がある
ビルドに必要な環境がデフォルトで揃っているため、Webpackに比べて設定が簡単

などが挙げられます。

なんで速いの？

バンドル処理の違い

Viteの開発環境では、node_modules/内の静的なモジュールに対して事前にバンドル処理を行い、単一のファイルとして出力します。

この点まではWebpackと同じです。

しかし、src/内など動的なモジュールに対しては ESM (ECMA Script Modules) を使いトランスパイルのみ行うことでバンドル処理を不要にしています。

この動的モジュールに対するバンドル処理の有無がWebpackとの最大の違いです。
Webpackはファイルの変更に対して再度バンドル処理が必要なため、処理速度に大きな違いが出ます。

静的モジュールにもESM使えばいいんじゃねと思う方もいるかもしれませんが(自分は思いました)、HTTPリクエストを削減するために変更が少ないファイルはまとめておこうという考えみたいです。

また、動的モジュールに変更があった際にはファイル単位でブラウザに読み込ませることでHMRを実現しています。

デフォルトのバンドラ(トランスパイラ)の違い

Viteはデフォルトでバンドラにesbuildを採用しています。

Go言語で開発されたesbuildはネイティブコードとしてコンパイルされマルチスレッドにも対応しているため、JavaScriptで開発されたBabelに比べて10 ~ 100倍ほどの速度を誇ります。
(Rustで書かれたswcはさらに速く、Viteがこれに対応したためプロジェクト作成時にswcを選択することが可能です)

WebpackはデフォルトでバンドラにBabelを使用していますが、プラグインでesbuildやswcに変更することも可能です。
しかし、設定が複雑になったり置き換えが完全ではなかったりするためViteに比べると劣る印象です。

設定が簡単

TypeScriptのトランスパイルなど、Webpackのリリース後に登場した現在では必須級の機能がViteには組み込まれているため、開発までのステップが短くなるという点では速いと言えるのではないでしょうか。

それでもWebpackを使うメリット

拡張性が高く、長く使われているためプラグインも豊富(ViteはRollupベースのプラグインをサポートしているので、Viteのプラグインが少ないわけではない)
古いブラウザで開発できる(ESMが2015年に実装されたため、デフォルトの設定だとViteはそれ以前のブラウザで開発ができない)

最後に

今回はViteについてWebpackと比較しながら調査してみました。

総合的な所感としてはWebpackじゃないとこれが実現できない！ってことがなさそう(自分が調べた限りは)だったので、悩んだ場合はとりあえずVite使っておけばいいかなと思いました。