JavaScript-Framework: Next.js 13 beschleunigt mit Webpack-Nachfolger Turbopack

Im Rahmen seiner Next.js Conf hat das Unternehmen Vercel die Veröffentlichung von Next.js 13 bekanntgegeben. Das React-Framework bringt eine Alpha-Version von Turbopack mit, dem auf Rust aufsetzenden angedachten Nachfolger des JavaScript-Bundlers Webpack. An der Spitze der Turbopack-Entwicklung steht der Webpack-Erfinder. Daneben liegt das neue app/-Verzeichnis als Beta vor. Es soll die Grundlage bilden, künftig komplexe Interfaces mit der Auslieferung von weniger JavaScript zu erstellen.

Rust-basierte Beschleunigung mit Turbopack

Next.js 13 bringt Turbopack mit, einen in Rust geschriebenen inkrementellen Bundler und Build-System für JavaScript und TypeScript. Turbopack reiht sich in weitere Next.js-Bestandteile ein, die bereits einen Rust-Unterbau erhalten haben, darunter der in Next.js 12 eingeführte Compiler SWC (Speedy Web Compiler). Von Webpack-Erfinder Tobias Koppers angeführt, soll Turbopack zum "next-generation Bundler" des Webs werden.

Die Architektur von Turbopack orientiert sich an Tools wie Turborepo und dem von Google entwickelten Build-Tool Bazel, die einen Fokus auf Caches legen, um nie zweimal die gleiche Arbeit auszuführen. Das Erfolgsgeheimnis von Turbopacks Geschwindigkeit besteht demnach darin, dass es auf einer wiederverwendbaren Library für Rust aufsetzt, die inkrementelle Computation erlaubt – bekannt als die Turbo Engine. Die Turbo-Website zeigt deren Funktionsweise im Detail.

Laut Vercel soll Turbopack in großen Anwendungen Updates 10-mal schneller als Vite.js und 700-mal schneller als Webpack zeigen. Bei noch größeren Anwendungen soll es den Performance-Vorteil weiter ausbauen und eine oft 20-mal höhere Geschwindigkeit erzielen als das ebenfalls für seine Performance bekannte Build-Tool Vite.js. Die Startup-Zeit von Turbopack soll 1,8 Sekunden betragen, verglichen mit 11,4 Sekunden bei Vite.js. Mit next dev --turbo lässt sich der neue Bundler in seiner Alpha-Version ausprobieren.

Lesen Sie auch: Web-Performance Day, 1. Dezember 2022

enterJS Web-Performance Day: Schnellere Webanwendungen mit Angular, CSS & Co.

Weitere Hintergründe und Zukunftspläne für Turbopack sind im Unternehmensblog nachzulesen. So soll es beispielsweise zunächst beim Next.js-13-Entwicklungsserver zum Einsatz kommen und künftig hinter Next.js-Produktions-Builds stehen – lokal und in der Cloud. Für Webpack-Nutzerinnen und -Nutzer ist ein inkrementeller Migrationspfad geplant.

Sparsamerer Umgang mit JavaScript-Code

Als Beta-Feature führt Next.js 13 das neue app/-Verzeichnis ein. Es ist ein Ergebnis des Layouts RFC, das die größten Änderungen in Next.js seit seiner Einführung im Jahr 2016 vorsieht. Das neu eingeführte Verzeichnis soll unter anderem das Layout komplexer Interfaces vereinfachen, die ihren State über Navigationen hinweg beibehalten, und dabei kostspielige Re-Renders vermeiden sowie fortgeschrittene Routing-Muster erlauben.

Dabei kann das app/-Verzeichnis mit einem bestehenden pages-Verzeichnis koexistieren, um einen schrittweisen Übergang zu erlauben. Zwar ist es nicht zwingend nötig, das neue Verzeichnis beim Aktualisieren auf Version 13 zu nutzen, doch soll es die Grundlage für komplexe Interfaces unter Auslieferung von weniger JavaScript-Code bilden. So führt es etwa Support für die neue React-Architektur Server Components ein. Dadurch lässt sich die Menge an zum Client gesendetem JavaScript-Code verringern, was zum schnelleren initialen Laden von Seiten führt. In der aktuellen Version React 18 gelten Server Components weiterhin als experimentell.

Alle diese und weitere Neuerungen in Next.js 13 beschreibt Vercel in seinem Blog. Informationen zur während der Next.js Conf angekündigten Übernahme des Analytics- und Conversion-Tools Splitbee zum Erweitern von First-Party Analytics sind dort ebenfalls zu finden.

(mai)