Turbopack

Next.js v13.4で新たに導入されたTurbopack

Webpackは長年にわたり、開発者コミュニティによって広く採用され、Web開発の中心的なモジュールバンドラとなりました。しかし、その性能と拡張性の制約により、新たなツールが求められるようになりました。Vercelは、これらの問題を解決するためにTurbopackを開発しました。

そして、Next.js v13.4で新たに導入されたのが、このTurbopackですね。ついにきたか〜という感じです。

Turbopackとは何かっていうと、JavaScriptとTypeScriptのために最適化された、Rustで書かれたインクリメンタルなバンドラーのことを指します。このTurbopackはNext.jsに組み込まれているんですよ。

Rustで書かれたTurbopackは、生産にのみ必要な最適化作業をスキップすることで、より高速にバンドルを行うことができるとのこと。Turboビルドエンジンで、スケジュールされたすべての関数の結果をキャッシュし、同じ作業を二度行う必要がないようにしているようです。

「そもそもバンドラーって何？」って思いますよね。ざっくり言うと、バンドラーは、複数のJavaScriptファイルやモジュールを、一つまたは複数の出力ファイルにまとめ上げてくれるツールのことを指します。このまとめ上げ作業を高速化するのが、このTurbopackの役目なんです。

使い方

Turbopackは、Next.jsのpagesディレクトリとappディレクトリの両方で使用でき、ローカル開発を高速化します。Turbopackを有効にするには、Next.jsの開発サーバーを実行するときに--turboフラグを使用します。

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

プロジェクトから始める場合

npx create-next-app --example with-turbopack

Turbopack Quickstart – Turbopack

ただし、現在のところ、Turbopackはnext devのみをサポートしていて、next buildはサポートしていないんですよね。でも心配しないでください、開発チームはnext buildのサポートを進行中のようです。

ただ、現状ではTurbopackはまだ完全にWebpackやNext.jsとの機能の互換性がありません。でも、Vercelの開発チームはバグの修正に取り組んでいて、Turbopackのインクリメンタルエンジンとキャッシングレイヤーの改善を進めています。これにより、ローカル開発がさらにスピードアップされる予定なんです。

公式サイトによると、将来的には、スタンドアロン CLI、プラグイン API、および Svelte や Vue などの他のフレームワークのサポートをリリースする予定だそうです。今後のアップデートに期待ですね。

Turbopackの役割

さて、ここでちょっと例え話を使って、Turbopackの役割を理解しやすく説明してみましょう。

皆さんは料理をしたことがありますよね？料理をするとき、食材を一つ一つ準備するのは時間がかかるし大変ですよね。それを効率化するために、料理用のキットがありますよね。あらかじめ必要な食材や調味料がまとめられていて、それを使うだけで簡単に料理ができる、というものです。この料理キットがあれば、料理の準備時間を大幅に短縮でき、より早く美味しい料理を作ることができます。

Turbopackも同じような役割を果たします。それぞれのJavaScriptファイルやモジュールが食材に相当し、Turbopackがそれらを効率よくまとめ上げて、すばやく料理（つまり、アプリケーション）を完成させる役割を果たすんですね。これにより、開発者は各部品を一つ一つ手作業で準備する時間を節約し、より早くアプリケーションを開発することができるんです。

Architecture: Turbopack | Next.js

そもそも、Turbopack とは何か？

Turbopack - The successor to webpackに詳しく書かれているポイントをまとめました。

Turbopackは、Webpackの後継としてRustで書かれたインクリメンタルなバンドラで、JavaScriptとTypeScriptに最適化されています。Webpackの開発者によって作られ、大規模な開発でも非常に高いパフォーマンスを発揮し、インクリメンタルな動作と適応的なバンドリング戦略により、どんなサイズのアプリでも高速で柔軟な開発体験を提供します。

インクリメンタルな設計により、Turbopackが一度行ったタスクは二度と行わないので、ビルドが非常に効率的です。TypeScript、JSX、CSS、CSS Modules、WebAssemblyなどを含むエコシステムに対応しています。アプリケーションのサイズに関係なく、Hot Module Replacement (HMR) が高速に動作します。

React Server Componentsをネイティブにサポートしています。複数の環境（ブラウザ、サーバ、エッジ、SSR、React Server Components）を同時にビルドし、最適化することができます。

ともあれ、Next.jsのプロダクションビルドを、ローカルでもクラウドでもサポート可能ということみたいです。この文章を読むと、Turbopackは非常に興味深いツールであり、JavaScriptとTypeScriptの開発体験を大いに改善する可能性があると感じます。主に以下の点が引き立っています。

1. パフォーマンス

TurbopackがRustで書かれているという点は特筆すべきです。Rustはメモリ安全性を保証し、同時に高いパフォーマンスを提供します。これにより、大規模なプロジェクトでも高速なビルド速度が期待できます。

2. インクリメンタルな設計

一度行ったタスクを二度と行わないという設計原則は、再ビルド時間の大幅な削減を意味します。これは、大規模なコードベースで特に有益です。

3. エコシステムの互換性

TypeScript、JSX、CSS、CSS Modules、WebAssemblyなどの広範な技術へのサポートは、既存のJavaScriptエコシステムとの互換性を確保する重要な要素です。

4. Hot Module Replacement (HMR)

HMRの高速な動作は、開発体験を大きく向上させる要素です。これにより、開発者は変更を即座に確認でき、迅速なフィードバックループが可能になります。

5. React Server Componentsのサポート

これはReactの最新機能への対応を示しており、最新の開発パターンに迅速に対応できるというTurbopackの強力な点です。

6. 複数環境へのビルドと最適化

これは、ブラウザ、サーバ、エッジ、SSR、React Server Componentsなど、さまざまなターゲット環境で一貫した品質とパフォーマンスを提供する能力を示しています。

Why Turbopack? – Turbopack