【ターボパック】

Turbopack とは?

💡 Webpackの700倍速!?Rust製の次世代バンドラ
📌 このページのポイント
Webpack vs Turbopack ビルド速度比較 Webpack コールドスタート → 約3.5秒 Vite 約1.2秒 Turbopack 約0.05秒 ⚡ HMR(ファイル変更時の反映速度) Webpack 約500ms Vite 約200ms Turbopack 約5ms ⚡ ※ 大規模プロジェクトでの参考値
Webpack vs Turbopack のビルド速度比較イメージ
ひよこ ひよこ

TurbopackってWebpackの代わりになるの?

ペンギン先生 ペンギン先生

そうだよ。Webpackの作者であるTobias Koppers氏がVercelに入社して開発しているんだ。Webpackの知見を活かしつつ、Rustで一から書き直して高速化した後継バンドラだよ

ひよこ ひよこ

どのくらい速いの?

ペンギン先生 ペンギン先生

Vercelの発表ではWebpackの最大700倍、Viteの10倍速いとされているよ。特にHMR(ファイルを変更した時の反映速度)が劇的に速くて、大規模プロジェクトでも一瞬で更新が反映されるんだ

ひよこ ひよこ

なんでそんなに速いの?

ペンギン先生 ペンギン先生

秘密は2つ。まずRustで書かれていてネイティブ速度で動くこと。そして「インクリメンタル計算」という仕組みで、変更があった部分だけを再計算するから無駄がないんだよ

ひよこ ひよこ

Viteもすごく速いって聞くけど、何が違うの?

ペンギン先生 ペンギン先生

Viteesbuildで事前バンドルして、開発時はESモジュールをそのまま配信する設計。Turbopackは全体をバンドルするけどインクリメンタルにキャッシュするアプローチ。大規模プロジェクトになるほどTurbopackの方が有利になる傾向があるよ

ひよこ ひよこ

もうみんなTurbopackに乗り換えた方がいいの?

ペンギン先生 ペンギン先生

Next.jsの開発サーバーではすでに使えるけど、本番ビルドへの対応はまだ進行中なんだ。Webpackのプラグインエコシステムとの完全互換も途上だから、今はNext.jsユーザーが開発体験向上のために使うのがメインだね

ひよこ ひよこ

Rust製のツールって最近多いよね

ペンギン先生 ペンギン先生

そうだね。esbuild(Go製)やSWCRust製)の成功で「JSツールはネイティブ言語で書き直すと劇的に速くなる」と証明されたからね。Turbopackもその流れの集大成と言えるんだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Turbopack」って出てきたら「Webpackの後継となるRust製の超高速バンドラ」と思えればだいたいOK!
📖 おまけ:英語の意味
「Turbopack」 = ターボ(高速)+ パック(バンドル)
💬 「ターボエンジンのように速いバンドラ」という意味を込めた名前だよ。Vercelの「Turborepo」と同じTurboブランドの一部だよ
← 用語集にもどる