Optimierung der lokalen Entwicklungsumgebung

Next.js wurde entwickelt, um eine hervorragende Entwicklererfahrung zu bieten. Wenn Ihre Anwendung wächst, könnten Sie langsamere Kompilierungszeiten während der lokalen Entwicklung bemerken. Diese Anleitung hilft Ihnen, häufige Performance-Probleme bei der Kompilierung zu identifizieren und zu beheben.

Lokale Entwicklung vs. Produktion

Der Entwicklungsprozess mit next dev unterscheidet sich von next build und next start.

next dev kompiliert Routen in Ihrer Anwendung, während Sie sie öffnen oder zu ihnen navigieren. Dies ermöglicht es Ihnen, den Entwicklungsserver zu starten, ohne auf die Kompilierung jeder Route in Ihrer Anwendung warten zu müssen, was sowohl schneller ist als auch weniger Speicher verbraucht. Ein Produktions-Build wendet andere Optimierungen an, wie das Minimieren von Dateien und das Erstellen von Content-Hashes, die für die lokale Entwicklung nicht benötigt werden.

Verbesserung der lokalen Entwicklungsperformance

1. Überprüfen Sie Ihre Antivirensoftware

Antivirensoftware kann den Dateizugriff verlangsamen.

Versuchen Sie, Ihren Projektordner zur Ausschlussliste der Antivirensoftware hinzuzufügen. Während dies auf Windows-Rechnern häufiger vorkommt, empfehlen wir dies für jedes System mit installierter Antivirensoftware.

2. Aktualisieren Sie Next.js und aktivieren Sie Turbopack

Stellen Sie sicher, dass Sie die neueste Version von Next.js verwenden. Jede neue Version enthält oft Performance-Verbesserungen.

Turbopack ist ein neuer Bundler, der in Next.js integriert ist und die lokale Performance verbessern kann.

npm install next@latest
npm run dev --turbopack

Erfahren Sie mehr über Turbopack. Weitere Informationen finden Sie in unseren Upgrade-Anleitungen und Codemods.

3. Überprüfen Sie Ihre Imports

Die Art und Weise, wie Sie Code importieren, kann die Kompilierungs- und Bündelungszeit erheblich beeinflussen. Erfahren Sie mehr über das Optimieren des Paket-Bundlings und erkunden Sie Tools wie Dependency Cruiser oder Madge.

Icon-Bibliotheken

Bibliotheken wie @material-ui/icons oder react-icons können Tausende von Icons importieren, selbst wenn Sie nur wenige verwenden. Versuchen Sie, nur die benötigten Icons zu importieren:

// Anstatt dies:
import { Icon1, Icon2 } from 'react-icons/md'

// Tun Sie dies:
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

Bibliotheken wie react-icons enthalten viele verschiedene Icon-Sets. Wählen Sie ein Set aus und bleiben Sie dabei.

Wenn Ihre Anwendung beispielsweise react-icons verwendet und all diese importiert:

pi (Phosphor Icons)
md (Material Design Icons)
tb (tabler-icons)
cg (cssgg)

Kombiniert sind dies Zehntausende von Modulen, die der Compiler verarbeiten muss, selbst wenn Sie nur einen Import aus jedem Set verwenden.

Barrel-Dateien

"Barrel-Dateien" sind Dateien, die viele Elemente aus anderen Dateien exportieren. Sie können Builds verlangsamen, weil der Compiler sie analysieren muss, um festzustellen, ob es im Modulbereich Seiteneffekte durch den Import gibt.

Versuchen Sie, wenn möglich, direkt aus spezifischen Dateien zu importieren. Erfahren Sie mehr über Barrel-Dateien und die integrierten Optimierungen in Next.js.

Optimieren Sie Paket-Imports

Next.js kann Imports für bestimmte Pakete automatisch optimieren. Wenn Sie Pakete verwenden, die Barrel-Dateien nutzen, fügen Sie sie Ihrer next.config.js hinzu:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopack analysiert Imports automatisch und optimiert sie. Es benötigt diese Konfiguration nicht.

4. Überprüfen Sie Ihre Tailwind CSS-Einrichtung

Wenn Sie Tailwind CSS verwenden, stellen Sie sicher, dass es korrekt eingerichtet ist.

Ein häufiger Fehler ist die Konfiguration des content-Arrays auf eine Weise, die node_modules oder andere große Dateiverzeichnisse einschließt, die nicht gescannt werden sollten.

Tailwind CSS Version 3.4.8 oder neuer warnt Sie vor Einstellungen, die Ihren Build verlangsamen könnten.

Seien Sie in Ihrer tailwind.config.js spezifisch darüber, welche Dateien gescannt werden sollen:
module.exports = { content: [ './src/**/*.{js,ts,jsx,tsx}', // Gut // Das könnte zu breit sein // Es würde auch `packages/**/node_modules` einschließen // '../../packages/**/*.{js,ts,jsx,tsx}', ], }
Vermeiden Sie das Scannen unnötiger Dateien:
module.exports = { content: [ // Besser - scannt nur den 'src'-Ordner '../../packages/ui/src/**/*.{js,ts,jsx,tsx}', ], }

5. Überprüfen Sie benutzerdefinierte Webpack-Einstellungen

Wenn Sie benutzerdefinierte Webpack-Einstellungen hinzugefügt haben, könnten diese die Kompilierung verlangsamen.

Überlegen Sie, ob Sie sie wirklich für die lokale Entwicklung benötigen. Sie können bestimmte Tools optional nur für Produktions-Builds einbinden oder zu Turbopack wechseln und Loader verwenden.

6. Optimieren Sie die Speichernutzung

Wenn Ihre Anwendung sehr groß ist, könnte sie mehr Speicher benötigen.

Erfahren Sie mehr über die Optimierung der Speichernutzung.

7. Server Components und Datenabruf

Änderungen an Server Components führen lokal dazu, dass die gesamte Seite neu gerendert wird, um die neuen Änderungen anzuzeigen, einschließlich des Abrufs neuer Daten für die Komponente.

Die experimentelle Option serverComponentsHmrCache ermöglicht es Ihnen, fetch-Antworten in Server Components über Hot Module Replacement (HMR)-Aktualisierungen in der lokalen Entwicklung zwischenzuspeichern. Dies führt zu schnelleren Antworten und reduzierten Kosten für abrechenbare API-Aufrufe.

Erfahren Sie mehr über die experimentelle Option.

8. Ziehen Sie lokale Entwicklung gegenüber Docker in Betracht

Wenn Sie Docker für die Entwicklung auf Mac oder Windows verwenden, könnten Sie im Vergleich zur lokalen Ausführung von Next.js eine deutlich langsamere Performance erleben.

Der Dateisystemzugriff von Docker auf Mac und Windows kann dazu führen, dass Hot Module Replacement (HMR) Sekunden oder sogar Minuten dauert, während dieselbe Anwendung mit schnellem HMR läuft, wenn sie lokal entwickelt wird.

Dieser Performance-Unterschied liegt daran, wie Docker Dateisystemoperationen außerhalb von Linux-Umgebungen handhabt. Für die beste Entwicklungserfahrung:

Verwenden Sie lokale Entwicklung (npm run dev oder pnpm dev) anstelle von Docker während der Entwicklung
Reservieren Sie Docker für Produktions-Deployments und das Testen von Produktions-Builds
Wenn Sie Docker für die Entwicklung verwenden müssen, ziehen Sie die Verwendung von Docker auf einem Linux-Rechner oder einer VM in Betracht

Erfahren Sie mehr über Docker-Deployment für den Produktionseinsatz.

Tools zur Problemfindung

Detailliertes Fetch-Logging

Verwenden Sie die Option logging.fetches in Ihrer next.config.js-Datei, um detailliertere Informationen darüber zu erhalten, was während der Entwicklung passiert:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

Erfahren Sie mehr über Fetch-Logging.

Turbopack-Tracing

Turbopack-Tracing ist ein Tool, das Ihnen hilft, die Performance Ihrer Anwendung während der lokalen Entwicklung zu verstehen. Es bietet detaillierte Informationen über die Zeit, die für die Kompilierung jedes Moduls benötigt wird, und wie sie miteinander verbunden sind.

Stellen Sie sicher, dass Sie die neueste Version von Next.js installiert haben.
Generieren Sie eine Turbopack-Trace-Datei:
NEXT_TURBOPACK_TRACING=1 npm run dev
Navigieren Sie in Ihrer Anwendung oder bearbeiten Sie Dateien, um das Problem zu reproduzieren.
Stoppen Sie den Next.js-Entwicklungsserver.
Eine Datei namens trace-turbopack wird im .next-Ordner verfügbar sein.
Sie können die Datei mit next internal trace [Pfad-zur-Datei] interpretieren:
next internal trace .next/trace-turbopack
In Versionen, in denen trace nicht verfügbar ist, hieß der Befehl turbo-trace-server:
next internal turbo-trace-server .next/trace-turbopack
Sobald der Trace-Server läuft, können Sie den Trace unter https://trace.nextjs.org/ anzeigen.
Standardmäßig aggregiert der Trace-Viewer die Zeiten. Um jede einzelne Zeit zu sehen, können Sie oben rechts im Viewer von "Aggregiert in Reihenfolge" zu "Spans in Reihenfolge" wechseln.

Immer noch Probleme?

Teilen Sie die im Abschnitt Turbopack-Tracing generierte Trace-Datei auf GitHub Discussions oder Discord.

Optimierung der lokalen Entwicklungsumgebung

On this page