Turbopackとは何ですか？

Rust製の超高速JavaScriptバンドラ。Next.jsに統合され、Webpackの後継として開発されている。

Turbopackのポイントは？

Vercelが開発するRust製のバンドラで、Webpackの後継として位置づけられている。インクリメンタルな計算アーキテクチャにより、変更されたファイルだけを再ビルドする。Next.js 13以降に統合されており、開発サーバーの起動やHMRが劇的に高速化する。Webpack互換のローダーAPIをサポートし、既存エコシステムからの移行を容易にしている

【ターボパック】

Turbopack とは？

💡 Webpackの700倍速！？Rust製の次世代バンドラ

📌 このページのポイント

Vercelが開発するRust製のバンドラで、Webpackの後継として位置づけられている
インクリメンタルな計算アーキテクチャにより、変更されたファイルだけを再ビルドする
Next.js 13以降に統合されており、開発サーバーの起動やHMRが劇的に高速化する
Webpack互換のローダーAPIをサポートし、既存エコシステムからの移行を容易にしている

Webpack vs Turbopack のビルド速度比較イメージ

ひよこ

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

ペンギン先生

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

ひよこ

どのくらい速いの？

ペンギン先生

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

ひよこ

なんでそんなに速いの？

ペンギン先生

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

ひよこ

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

ペンギン先生

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

ひよこ

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

ペンギン先生

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

ひよこ

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

ペンギン先生

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

まとめ：ざっくりこれだけ覚えればOK！

「Turbopack」って出てきたら「Webpackの後継となるRust製の超高速バンドラ」と思えればだいたいOK！

📖 おまけ：英語の意味

「Turbopack」＝ターボ（高速）+ パック（バンドル）

💬 「ターボエンジンのように速いバンドラ」という意味を込めた名前だよ。Vercelの「Turborepo」と同じTurboブランドの一部だよ

← 用語集にもどる