Turbopack

Turbopack ist ein inkrementeller Bundler, optimiert für JavaScript und TypeScript, in Rust geschrieben und in Next.js integriert. Sie können Turbopack sowohl mit dem Pages- als auch mit dem App-Router für eine deutlich schnellere lokale Entwicklungsumgebung verwenden.

Warum Turbopack?

Wir haben Turbopack entwickelt, um die Leistung von Next.js zu steigern, einschließlich:

• Einheitlicher Graph: Next.js unterstützt mehrere Ausgabeumgebungen (z.B. Client und Server). Die Verwaltung mehrerer Compiler und das Zusammenfügen von Bundles kann mühsam sein. Turbopack verwendet einen einheitlichen Graph für alle Umgebungen.
• Bundling vs Native ESM: Einige Tools überspringen das Bundling in der Entwicklung und verlassen sich auf das native ESM des Browsers. Dies funktioniert gut für kleine Apps, kann aber große Apps aufgrund übermäßiger Netzwerkanfragen verlangsamen. Turbopack bundlet in der Entwicklung, aber auf optimierte Weise, um große Apps schnell zu halten.
• Inkrementelle Berechnung: Turbopack parallelisiert die Arbeit über Kerne hinweg und cacht Ergebnisse bis auf die Funktionsebene. Sobald ein Arbeitsschritt erledigt ist, wird Turbopack ihn nicht wiederholen.
• Lazy Bundling: Turbopack bundlet nur das, was tatsächlich vom Dev-Server angefordert wird. Dieser faule Ansatz kann die anfänglichen Kompilierzeiten und den Speicherverbrauch reduzieren.

Erste Schritte

Um Turbopack in Ihrem Next.js-Projekt zu aktivieren, fügen Sie das Flag --turbopack zu den dev- und build-Skripten in Ihrer package.json-Datei hinzu:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

Aktuell ist Turbopack für dev stabil, während build sich in der Alpha-Phase befindet. Wir arbeiten aktiv an der Produktionsunterstützung, während Turbopack sich der Stabilität nähert.

Unterstützte Funktionen

Turbopack in Next.js bietet Zero-Configuration für gängige Anwendungsfälle. Nachfolgend finden Sie eine Zusammenfassung der out-of-the-box unterstützten Funktionen sowie einige Hinweise darauf, wie Sie Turbopack bei Bedarf weiter konfigurieren können.

Sprachfunktionen

Framework- und React-Funktionen

CSS und Styling

Assets

Modulauflösung

Leistung und Fast Refresh

Nicht unterstützte und nicht geplante Funktionen

Einige Funktionen sind noch nicht implementiert oder nicht geplant:

• Veraltete CSS-Module-Funktionen
  • Eigenständige :local- und :global-Pseudo-Klassen (nur die Funktionsvariante :global(...) wird unterstützt).
  • Die @value-Regel (ersetzt durch CSS-Variablen).
  • :import- und :export-ICSS-Regeln.
  • composes in .module.css, das eine .css-Datei komponiert. In webpack würde die .css-Datei als CSS-Modul behandelt, während Turbopack die .css-Datei immer als global betrachtet. Wenn Sie composes in einem CSS-Modul verwenden möchten, müssen Sie die .css-Datei in eine .module.css-Datei ändern.
  • @import in CSS-Modulen, das .css als CSS-Modul importiert. In webpack würde die .css-Datei als CSS-Modul behandelt, während Turbopack die .css-Datei immer als global betrachtet. Wenn Sie @import in einem CSS-Modul verwenden möchten, müssen Sie die .css-Datei in eine .module.css-Datei ändern.
• webpack()-Konfiguration in next.config.js Turbopack ersetzt webpack, daher werden webpack()-Konfigurationen nicht erkannt. Verwenden Sie stattdessen die turbopack-Konfiguration.
• AMP Nicht für Turbopack-Unterstützung in Next.js geplant.
• Yarn PnP Nicht für Turbopack-Unterstützung in Next.js geplant.
• experimental.urlImports Nicht für Turbopack geplant.
• experimental.esmExternals Nicht geplant. Turbopack unterstützt die veraltete esmExternals-Konfiguration in Next.js nicht.
• Einige Next.js-Experimental-Flags
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills Diese sollen in Zukunft implementiert werden.

Eine vollständige, detaillierte Aufschlüsselung jedes Feature-Flags und seines Status finden Sie in der Turbopack-API-Referenz.

Konfiguration

Turbopack kann über next.config.js (oder next.config.ts) unter dem Schlüssel turbopack konfiguriert werden. Konfigurationsoptionen umfassen:

• rules Definieren Sie zusätzliche webpack-Loader für Dateitransformationen.
• resolveAlias Erstellen Sie manuelle Aliase (wie resolve.alias in webpack).
• resolveExtensions Ändern oder erweitern Sie Dateierweiterungen für die Modulauflösung.
• moduleIds Legen Sie fest, wie Modul-IDs generiert werden ('named' vs 'deterministic').
• treeShaking Aktivieren oder deaktivieren Sie Tree Shaking in der Entwicklung und zukünftigen Produktions-Builds.
• memoryLimit Legen Sie eine Speicherbegrenzung (in Bytes) für Turbopack fest.

module.exports = {
  turbopack: {
    // Beispiel: Hinzufügen eines Alias und einer benutzerdefinierten Dateierweiterung
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

Weitere detaillierte Konfigurationsbeispiele finden Sie in der Turbopack-Konfigurationsdokumentation.

Erstellung von Trace-Dateien zur Leistungsanalyse

Wenn Sie auf Leistungs- oder Speicherprobleme stoßen und dem Next.js-Team bei der Diagnose helfen möchten, können Sie eine Trace-Datei generieren, indem Sie NEXT_TURBOPACK_TRACING=1 zu Ihrem dev-Befehl hinzufügen:

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

Dies erzeugt eine .next/trace-turbopack-Datei. Fügen Sie diese Datei bei der Erstellung eines GitHub-Issues im Next.js-Repo hinzu, um uns bei der Untersuchung zu helfen.

Zusammenfassung

Turbopack ist ein Rust-basierter, inkrementeller Bundler, der entwickelt wurde, um die lokale Entwicklung und Builds schnell zu machen – insbesondere für große Anwendungen. Es ist in Next.js integriert und bietet Zero-Configuration-Unterstützung für CSS, React und TypeScript.

Bleiben Sie auf dem Laufenden, während wir Turbopack weiter verbessern und die Produktions-Build-Unterstützung hinzufügen. Probieren Sie es in der Zwischenzeit mit next dev --turbopack aus und teilen Sie uns Ihr Feedback mit.

Versionsänderungen