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 viel 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 bundelt 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 eine Arbeit erledigt ist, wiederholt Turbopack sie nicht.
• Lazy Bundling: Turbopack bundelt nur das, was tatsächlich vom Dev-Server angefordert wird. Dieser faule Ansatz kann die anfänglichen Kompilierungszeiten 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-Skripts 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:

• Legacy-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.
• 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 Legacy-Konfiguration esmExternals 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 Setzen Sie eine Speicherbegrenzung (in Bytes) für Turbopack.

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

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

Zusammenfassung

Turbopack ist ein in Rust geschriebener, 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 dran für weitere Updates, 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