コンテンツへスキップ
LatchkeyLatchkey home

Vite vs esbuild: CIにどちらのビルドツールを使うべきか?

両者は重なりますが同じ仕事ではありません。esbuildは素の超高速バンドラーであり、Viteはesbuild (とRollup) を内部で使う完全なビルドツールです。

esbuild (Go製) は速度で高く評価される低レベルのバンドラー/トランスパイラーです。Viteはより高レベルのビルドツール兼開発サーバーで、開発時のトランスフォームにはesbuildを、本番ビルドにはRollupを使い、HMR、プラグイン、フレームワーク統合を追加します。

Viteesbuild
レイヤー完全なビルドツール + 開発サーバー低レベルのバンドラー/トランスパイラー
速度高速 (esbuild + Rollup)きわめて高速
開発サーバー / HMRありなし (バンドラーのみ)
本番出力Rollup (最適化済み)esbuild (調整項目は少なめ)
プラグイン / フレームワークとの相性大きい (Rollupプラグイン)小さめ、より低レベル

CIでの挙動

ほとんどのアプリにはViteが向いています。完全なパイプライン (開発サーバー、HMR、プラグイン、フレームワークプリセット) を提供し、速度のためにesbuildを使いながら最適化されたRollupビルドを生成します。スクリプトやツール内で最小限かつ超高速なバンドリング/トランスパイルのステップが必要で、フレームワークを意識したビルドが不要な場合は、esbuildを直接使いましょう。実際、Viteを使うことはすでに内部でesbuildに頼っていることを意味します。

高速化する

依存関係とbuild cacheをlockfileをキーにcacheして、コールドリビルドを避けましょう。どちらもCI runner上で同じように動作します。より高速なマネージドrunnerは、大きなアプリでのビルドステップを短縮します。

Benchmark on your repository before choosing

Build-tool benchmarks published by vendors use repositories chosen to show a difference. Yours is the only one that matters, and both a cold and a warm measurement are needed because CI mostly runs cold.

Terminal
# cold: no cache, the CI condition
rm -rf node_modules/.cache dist && time <tool> build

# warm: the local development condition
time <tool> build

# and the one people forget: incremental after a one-line change
echo "// touch" >> src/index.ts && time <tool> build

結論

アプリやフレームワークプロジェクトを構築するなら: 完全で最適化されたパイプラインのためにVite。スクリプト内で最小限の超高速バンドラーが必要なら: esbuildを直接。両者は異なるレイヤーです - Viteはすでにあなたの代わりにesbuildを使っています。

よくある質問

Vite vs esbuild: Which Build Tool for CI?
esbuild (Go) is a low-level bundler/transpiler prized for speed. Vite is a higher-level build tool and dev server that uses esbuild for dev transforms and Rollup for production builds, adding HMR, plugins, and framework integration.
In CI?
Most apps want Vite: it gives a complete pipeline (dev server, HMR, plugins, framework presets) and produces optimized Rollup builds while still using esbuild for speed. Reach for esbuild directly when you need a minimal, ultra-fast bundling/transpiling step in a script or tool and do not need a framework-aware build.
Speed it up?
Cache dependencies and the build cache keyed on your lockfile to avoid cold rebuilds. Both run the same on CI runners; faster managed runners shorten the build step on large apps.
Which should I choose?
Building an app or framework project: Vite for the full, optimized pipeline. Need a minimal ultra-fast bundler in a script: esbuild directly. They are different layers - Vite already uses esbuild for you.

関連ガイド