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

Turbopack vs webpack: CIにどちらのバンドラーを使うべきか?

TurbopackはVercelによるRustベースのwebpack後継で、速度を目指しています - ただしwebpackは、あなたのtoolingが前提とする成熟した普遍的なデフォルトです。

webpackは長年使われている、高度に設定可能で最大のプラグインエコシステムを持つJavaScriptバンドラーです。TurbopackはVercelによるRustベースのバンドラーで、webpackのより高速な後継として位置づけられ、主にNext.jsと統合されています。

Turbopackwebpack
実装RustJavaScript
速度高速 (インクリメンタル)大きなビルドでは遅め
成熟度新しく、進化中非常に成熟
エコシステム / プラグイン小さいが成長中最大
フレームワークとの相性Next.js中心フレームワーク非依存

CIでの挙動

Turbopackは高速なインクリメンタルビルドを狙い、デフォルトになりつつあるNext.js内で最も関連性があります。webpackは、フレームワークをまたいで最も広いプラグインとloaderのサポートを持つ、普遍的で実戦で鍛えられたバンドラーであり続けています。Next.jsを使っているなら、自分のバージョンでTurbopackを評価しましょう。それ以外では、webpack (またはVite) が今のところ安全な選択です。CIで頼る前に、Turbopackの現在の本番ビルドの状況を確認しましょう。

高速化する

いずれにせよ、依存関係とビルドを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

結論

Next.jsアプリを構築し、安定するにつれて速度が欲しいなら: Turbopack。最大の成熟度、エコシステム、またはNext以外のフレームワークが必要なら: webpack。まず、使用する正確なバージョンでTurbopackの本番ビルドの準備状況を確認しましょう。

よくある質問

Turbopack vs webpack: Which Bundler for CI?
webpack is the long-standing, highly configurable JavaScript bundler with the largest plugin ecosystem. Turbopack is a Rust-based bundler from Vercel, positioned as webpack's faster successor and integrated primarily with Next.js.
In CI?
Turbopack targets fast incremental builds and is most relevant inside Next.js, where it is becoming the default. webpack remains the universal, battle-tested bundler with the broadest plugin and loader support across frameworks.
Speed it up?
Cache dependencies and the build keyed on your lockfile to avoid cold rebuilds either way. Both run on CI runners; faster managed runners shorten heavy bundling steps.
Which should I choose?
Building a Next.js app and want speed as it stabilizes: Turbopack. Need maximum maturity, ecosystem, or non-Next frameworks: webpack. Confirm Turbopack's production-build readiness for your exact version first.

関連ガイド