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

> CIにおけるVite vs esbuild: 完全なビルドツール vs 素のバンドラー、速度、出力、プラグイン。どちらが本番パイプラインに合うか。

Source: https://latchkey.dev/ja/learn/tool-comparisons/vite-vs-esbuild  
Updated: 2026-06-26

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

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

## Comparison

|  | Vite | esbuild |
| --- | --- | --- |
| レイヤー | 完全なビルドツール + 開発サーバー | 低レベルのバンドラー/トランスパイラー |
| 速度 | 高速 (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
```

> Cold and warm can rank the two tools in opposite orders. Decide which one you are optimising for first: CI time is cold, developer feedback is warm and incremental.

## 結論

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

## FAQ

### 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.

---

Latchkey runs CI/CD that repairs its own failures. Agent entry points: https://latchkey.dev/agent.txt, https://latchkey.dev/openapi.json, https://latchkey.dev/llms.txt