2022/10/26、VercelはWebpackの正統後継を詠ったバンドルツール、Turbopackを発表しました。
以下はVercelのブログから、Introducing Turbopack: Rust-based successor to Webpackの紹介です。
Introducing Turbopack: Rust-based successor to Webpack
Vercelの使命は、イノベーターが閃きを形作るのに必要なスピードと信頼性を提供することです。
昨年は、我々はNext.jsがアプリをバンドルするスピードを向上することに注力しました。
JavaScriptベースからRustベースのツールに移行するたびに、如実に効果が現れました。
Babelからの移行では、トランスパイルの速度が17倍になりました。
Terserの移行においては、minifyが6倍になり、さらに読み込み時間の短縮と帯域の使用量まで削減できました。
残りの山はひとつ、Webpackです。
Webpackはこれまで30億回以上もダウンロードされており、もはやWeb構築には欠かせないツールとなっています。
しかし、もっと早く、もっとスケール可能なツールが必要なときがやってきました。
本日、我々はWebpackの正統後継、Turbopackを発表します。
Turbopackは、Webpackの生みの親であるTobias Koppersその人が率いる、次世代のWebバンドルソフトウェアです。
Turbopackはオープンソースであり、そして今後はあらゆるフレームワークに対応していきます。
Next.js 13では、next dev --turboコマンドでTurbopackのアルファ版を試すことができます。
How fast is Turbopack?
最速の開発環境を実現するために、Turbopackは新しいインクリメンタルアーキテクチャで構築されています。
大規模なアプリケーションではViteの10倍、そしてWebpackの700倍の速度で動作します。
さらに大きなアプリケーションでは差がさらに広がり、実にViteの20倍の速度までなることもあります。
Turbopackは、必要最小限のアセットのみをバンドルするため、起動時間が非常に速いこともポイントです。
3000モジュールを含む場合、Viteでは11.4秒かかるアプリがTurbopackではわずか1.8秒で起動します。
さらに詳しく知りたいときはドキュメントを参照し、ベンチマークを試してみてください。
Why is Turbopack so fast?
Turbopackのアーキテクチャは、TurborepoおよびGoogle Bazelなどから教訓を得ています。
すなわち、同じことを2回行わない、キャッシュを使う、です。
TurbopackはTurboをベースに作られています。
TurboはオープンソースのRust製インクリメンタルメモ化プログラムです。
Turboでは、プログラム中のあらゆる関数をキャッシュすることができます。
プログラムが再度実行されたとき、入力が変更されないかぎり関数を再実行しません。
このアーキテクチャにより、関数レベルで多くの処理をスキップることが可能になりました。
より詳細は、Turboのドキュメントをご覧ください。
The future of Turbo
まず、Next.js 13の開発サーバにはTurbopackが適用されます。
超高速のHMRを実現し、またReact Server Components・TypeScript・JSX・CSS等をネイティブにサポートします。
最終的には、ローカルとクラウドの両方でNext.jsのプロダクションビルドをサポートします。
さらにVercel Remote Cachingを用いて、チーム全体でTurboキャッシュを共有できるようにする予定です。
現在のWebpackユーザには、Rustベースへの段階的な移行パスを提供します。
ユーザがより早く開発サイクルを回し、なにかを閃いた瞬間に実装できる環境をサポートします。
我々は、Turboエコシステムのもたらす未来に、これ以上ないほど期待しています。
Turbopackのアルファ版をぜひ体験してください。
感想
700倍ってなんだよ異次元すぎだろ。
そんなわけでNext.jsは、今後全面的にTurbopackに移行していくようです。
ビルドが高速化することにより、これまでよりも仕事が楽になりますね。
しかしそもそも、毎回ビルドするという手間そのものをどうにかするようなパラダイムシフトは起こらないものだろうか。