turbo

Die Option turbo ermöglicht es Ihnen, Turbopack anzupassen, um verschiedene Dateien zu transformieren und zu ändern, wie Module aufgelöst werden.

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
export default nextConfig

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
module.exports = nextConfig

Hinweis:

Turbopack für Next.js erfordert keine Loader oder Loader-Konfiguration für eingebaute Funktionalität. Turbopack hat integrierte Unterstützung für CSS und das Kompilieren moderner JavaScript, sodass kein css-loader, postcss-loader oder babel-loader benötigt wird, wenn Sie @babel/preset-env verwenden.

Referenz

Optionen

Die folgenden Optionen sind für die turbo-Konfiguration verfügbar:

Option	Beschreibung
`rules`	Liste der nicht unterstützten webpack-Loader, die bei der Ausführung mit Turbopack angewendet werden.
`resolveAlias`	Ordnet aliasierte Importe Modulen zu, die stattdessen geladen werden sollen.
`resolveExtensions`	Liste der Erweiterungen, die beim Importieren von Dateien aufgelöst werden sollen.
`moduleIdStrategy`	Modulkennnummern zuweisen
`useSwcCss`	Verwende `swc_css` anstelle von `lightningcss` für Turbopack
`treeshaking`	Tree Shaking für den Turbopack-Entwicklungsserver und Build aktivieren.
`memoryLimit`	Ein Ziel-Speicherlimit für turbo in Bytes.

Unterstützte Loader

Die folgenden Loader wurden getestet und funktionieren mit Turbopack's webpack-Loader-Implementierung:

Beispiele

Konfigurieren von webpack-Loadern

Wenn Sie Loader-Unterstützung über die eingebauten Funktionen hinaus benötigen, funktionieren viele webpack-Loader bereits mit Turbopack. Es gibt derzeit einige Einschränkungen:

Es wird nur ein Kern-Subset der webpack-Loader-API implementiert. Derzeit gibt es genügend Abdeckung für einige beliebte Loader, und wir werden unsere API-Unterstützung in Zukunft erweitern.
Nur Loader, die JavaScript-Code zurückgeben, werden unterstützt. Loader, die Dateien wie Stylesheets oder Bilder transformieren, werden derzeit nicht unterstützt.
Optionen, die an webpack-Loader übergeben werden, müssen einfache JavaScript-Primitive, -Objekte und -Arrays sein. Es ist beispielsweise nicht möglich, require() Plugin-Module als Optionswerte zu übergeben.

Um Loader zu konfigurieren, fügen Sie in next.config.js die Namen der installierten Loader und alle Optionen hinzu, wobei Dateierweiterungen einer Liste von Loadern zugeordnet werden:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

Hinweis: Vor Next.js Version 13.4.4 hieß turbo.rules turbo.loaders und akzeptierte nur Dateierweiterungen wie .mdx anstelle von *.mdx.

Auflösen von Aliasen

Turbopack kann so konfiguriert werden, dass die Modulauflösung durch Aliase modifiziert wird, ähnlich der webpack-Konfiguration resolve.alias.

Um Auflösungs-Aliase zu konfigurieren, ordnen Sie in next.config.js importierte Muster ihrem neuen Ziel zu:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

Dies aliasiert Importe des underscore-Pakets zum lodash-Paket. Mit anderen Worten, import underscore from 'underscore' wird das lodash-Modul anstelle von underscore laden.

Turbopack unterstützt auch bedingte Aliasierung über dieses Feld, ähnlich den bedingten Exporten von Node.js. Derzeit wird nur die Bedingung browser unterstützt. In obigem Fall werden Importe des mocha-Moduls zu mocha/browser-entry.js aliasiert, wenn Turbopack Browser-Umgebungen als Ziel hat.

Auflösen benutzerdefinierter Erweiterungen

Turbopack kann so konfiguriert werden, dass Module mit benutzerdefinierten Erweiterungen aufgelöst werden, ähnlich der webpack-Konfiguration resolve.extensions.

Um Auflösungs-Erweiterungen zu konfigurieren, verwenden Sie das Feld resolveExtensions in next.config.js:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],
    },
  },
}

Dies überschreibt die ursprünglichen Auflösungs-Erweiterungen mit der bereitgestellten Liste. Stellen Sie sicher, dass Sie die Standarderweiterungen einschließen.

Weitere Informationen und Hinweise zur Migration Ihrer App von webpack zu Turbopack finden Sie in Turbopack's Dokumentation zur webpack-Kompatibilität.

Zuweisen von Modulkennnummern

Turbopack unterstützt derzeit zwei Strategien zur Zuweisung von Modulkennnummern:

'named' weist lesbare Modulkennnummern basierend auf dem Pfad und der Funktionalität des Moduls zu.
'deterministic' weist kleine, gehashte numerische Modulkennnummern zu, die zwischen Builds weitgehend konsistent sind und daher die Langzeit-Caching-Strategie unterstützen.

Wenn nicht festgelegt, verwendet Turbopack 'named' für Entwicklungs-Builds und 'deterministic' für Produktions-Builds.

Um die Modulkennnummern-Strategie zu konfigurieren, verwenden Sie das Feld moduleIdStrategy in next.config.js:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      moduleIdStrategy: 'deterministic',
    },
  },
}

Versionshistorie

Version	Änderungen
`13.0.0`	`experimental.turbo` eingeführt.