Turbopackとは何なのか調べてみる
こんにちは。ZOZOの@remsleep_zzzです。
この記事は ZOZO Advent Calendar 2022 カレンダー Vol.4の 8日目の記事です。
What is Turbopack?
TurbopackはVercelによって開発が進められているバンドラーです。
TypeScriptとJavascriptに最適化されています。
WebpackやBezelに影響を受けており、Rustでできたこの製品はNextjs13からα版をためすことができます。
この発表を見たときとてもワクワクしました。
そして改めてどういうしくみでバンドラーが働くのか、以前はどうだったのかを整理しておこうと思いこの記事を書いています。
Turbopackが実現していること
Turbopackはバンドラーです。Webpackやその他のバンドラーに比べ高速に起動しリソースを読み込んで表示します。
ESMやCJS、UMDとは何が違うのか
Viteを始めとするESMとは何が違うのでしょうか?
ESMやCJS、UMDもTurbopackと同じようにTypeScriptやJavascriptで書かれたアプリケーションの読み込み速度の改善を目的としています。
TurbopackのESMやCJS、UMDとの違いは読み込みの仕方とキャッシュです。
Turbopackはインクリメンタルな計算をします。また、Viteなどが行わない遅延読み込みをすることで高速化を実現しています。
またTurbopackは関数レベルでキャッシュを行い、一度読み込まれた関数は再度読み込みに行く必要はありません。キャッシュはサーバーが停止すると破棄されます。
そもそもモジュールバンドラーは何をしてるのか
モジュールバンドラーはTypeScriptやJavascriptで書かれたアプリケーションの依存関係を解決し一つにまとめることをしています。その方式としてESMやCJS、UMDが存在しているのです。
Webpack以前
少し歴史の話をしましょう。かいつまんで説明をするので詳細を書いていない箇所があります、ご容赦ください。
もともとのJavascriptにはモジュールと言う概念はありませんでした。
しかし、アプリケーションの複雑化に伴い問題が起きます。グローバルな名前空間の汚染です。
意図しない値が変数に代入されるという事態を招きました。
そこで即時関数を使いグローバルな名前空間の汚染を回避する方法が取られます。関数スコープを利用したものです。
ここでタスクランナーと呼ばれるツールが登場し、ビルドを行うようになりました。
Webpack以後、Turbopack以前
Nodejsが登場してJavascriptをサーバーやブラウザで動くようにしようという動きが出始めます。
Nodejsの登場によりパッケージマネージャーと言う概念が登場するようになりました。npmですね。
そしてWebpackが登場し、かつてはGulpなどが行っていたモジュールをまとめる役割や依存関係の解決、画像生成などを代替するようになります。このときにWebpackが生成するモジュールをUMDと呼びます。
そして時間は流れ、ES2015で策定されたJavascriptにおけるスタンダードなモジュールシステムが登場します。それがESMです。
ESMでは直接Javascriptファイルから別のJavascriptファイルが直接読み込まれます。
ViteはこのESMを利用しています。
Turbopack以後
ESMはすべてを解決してくれそうですが、そうはいきませんでした。
バンドラーが担っている役割はファイルの依存関係の解決に限らなかったこともありますが、アプリケーションの複雑化と大規模化が大きな要因です。
これを解決するためにVercelはTurbopackを開発し、読み込み時間の大幅な高速化につなげたというわけです。
実際に試してみる
サンプルを触るのはとてもかんたんです。
npx create-next-app --example with-turbopack
プロジェクトを作成してrootでアプリケーションを起動したらすぐに試すことができます。
npm run dev
まとめ
- Turbopackという新しいバンドラーが登場した
- このバンドラーはインクリメンタルな計算を行い遅延読み込みとキャッシュを用いて高速化に貢献してくれる
- 高速な読み込みが可能になり大規模開発にも最適化されたバンドラーとなりうる
参考資料
Discussion