Menu

Speichernutzung

Mit zunehmender Größe und Funktionsvielfalt können Anwendungen mehr Ressourcen bei der lokalen Entwicklung oder der Erstellung von Produktionsbuilds benötigen.

Lassen Sie uns einige Strategien und Techniken zur Optimierung des Arbeitsspeichers und zur Behebung häufiger Speicherprobleme in Next.js erkunden.

Anzahl der Abhängigkeiten reduzieren

Anwendungen mit einer großen Anzahl von Abhängigkeiten werden mehr Arbeitsspeicher verwenden.

Der Bundle Analyzer kann Ihnen helfen, große Abhängigkeiten in Ihrer Anwendung zu untersuchen, die möglicherweise entfernt werden können, um Leistung und Speichernutzung zu verbessern.

experimental.webpackMemoryOptimizations ausprobieren

Ab v15.0.0 können Sie experimental.webpackMemoryOptimizations: true in Ihrer next.config.js-Datei hinzufügen, um das Verhalten in Webpack zu ändern, wodurch der maximale Speicherverbrauch reduziert wird, was jedoch möglicherweise die Kompilierungszeiten leicht erhöht.

Hinweis: Diese Funktion ist derzeit experimentell, um sie zunächst an mehr Projekten zu testen, gilt aber als risikoarm.

next build mit --experimental-debug-memory-usage ausführen

Ab 14.2.0 können Sie next build --experimental-debug-memory-usage ausführen, um den Build in einem Modus zu starten, in dem Next.js kontinuierlich Informationen über die Speichernutzung ausgibt, wie Heap-Nutzung und Garbage-Collection-Statistiken. Heap-Snapshots werden automatisch erstellt, wenn die Speichernutzung nahe dem konfigurierten Limit liegt.

Hinweis: Diese Funktion ist nicht kompatibel mit der Webpack-Build-Worker-Option, die automatisch aktiviert wird, es sei denn, Sie haben eine benutzerdefinierte Webpack-Konfiguration.

Heap-Profil aufzeichnen

Um Speicherprobleme zu untersuchen, können Sie ein Heap-Profil aus Node.js aufzeichnen und es in Chrome DevTools laden, um potenzielle Quellen von Speicherlecks zu identifizieren.

Übergeben Sie in Ihrem Terminal beim Start des Next.js-Builds das Flag --heap-prof an Node.js:

node --heap-prof node_modules/next/dist/bin/next build

Am Ende des Builds wird von Node.js eine .heapprofile-Datei erstellt.

In Chrome DevTools können Sie die Registerkarte "Speicher" öffnen und auf die Schaltfläche "Profil laden" klicken, um die Datei zu visualisieren.

Heap-Snapshot analysieren

Sie können ein Inspektionswerkzeug verwenden, um den Speicherverbrauch der Anwendung zu analysieren.

Fügen Sie beim Ausführen des next build- oder next dev-Befehls NODE_OPTIONS=--inspect am Anfang des Befehls hinzu. Dies macht den Inspektions-Agent auf dem Standardport verfügbar. Wenn Sie möchten, dass der Prozess vor dem Start von Benutzercode anhält, können Sie stattdessen --inspect-brk übergeben. Während der Prozess läuft, können Sie ein Tool wie Chrome DevTools verwenden, um sich mit dem Debugging-Port zu verbinden und einen Heap-Snapshot aufzuzeichnen und zu analysieren, um zu sehen, welcher Speicher zurückgehalten wird.

Ab 14.2.0 können Sie auch next build mit dem Flag --experimental-debug-memory-usage ausführen, um das Erstellen von Heap-Snapshots zu erleichtern.

Während der Ausführung in diesem Modus können Sie jederzeit ein SIGUSR2-Signal an den Prozess senden, woraufhin der Prozess einen Heap-Snapshot erstellt.

Der Heap-Snapshot wird im Projektstammverzeichnis der Next.js-Anwendung gespeichert und kann in jedem Heap-Analyzer wie Chrome DevTools geladen werden, um zu sehen, welcher Speicher zurückgehalten wird. Dieser Modus ist noch nicht mit Webpack-Build-Workern kompatibel.

Weitere Informationen finden Sie unter Aufzeichnen und Analysieren von Heap-Snapshots.

Webpack-Build-Worker

Der Webpack-Build-Worker ermöglicht es Ihnen, Webpack-Kompilierungen in einem separaten Node.js-Worker auszuführen, was den Speicherverbrauch Ihrer Anwendung während der Builds verringert.

Diese Option ist ab v14.1.0 standardmäßig aktiviert, wenn Ihre Anwendung keine benutzerdefinierte Webpack-Konfiguration hat.

Wenn Sie eine ältere Version von Next.js verwenden oder eine benutzerdefinierte Webpack-Konfiguration haben, können Sie diese Option aktivieren, indem Sie experimental.webpackBuildWorker: true in Ihrer next.config.js festlegen.

Hinweis: Diese Funktion ist möglicherweise nicht mit allen benutzerdefinierten Webpack-Plugins kompatibel.

Webpack-Cache deaktivieren

Der Webpack-Cache speichert generierte Webpack-Module im Arbeitsspeicher und/oder auf der Festplatte, um die Geschwindigkeit der Builds zu verbessern. Dies kann die Leistung verbessern, erhöht aber auch den Speicherverbrauch Ihrer Anwendung zum Speichern der zwischengespeicherten Daten.

Sie können dieses Verhalten deaktivieren, indem Sie Ihrer Anwendung eine benutzerdefinierte Webpack-Konfiguration hinzufügen:

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Wichtig: Die modifizierte Konfiguration zurückgeben
    return config
  },
}
 
export default nextConfig

Statische Analyse deaktivieren

Typprüfung und Linting können, besonders in großen Projekten, viel Arbeitsspeicher benötigen. Die meisten Projekte verfügen jedoch über einen dedizierten CI-Runner, der diese Aufgaben bereits ausführt. Wenn der Build während des Schritts "Linting und Überprüfung der Typen" Speicherprobleme verursacht, können Sie diese Aufgaben während der Builds deaktivieren:

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // Warnung: Dies erlaubt Produktionsbuilds, auch wenn
    // Ihr Projekt ESLint-Fehler enthält.
    ignoreDuringBuilds: true,
  },
  typescript: {
    // !! WARNUNG !!
    // Gefährlich: Erlaubt Produktionsbuilds, auch wenn
    // Ihr Projekt Typfehler enthält.
    // !! WARNUNG !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

Beachten Sie, dass dies möglicherweise fehlerhafte Bereitstellungen aufgrund von Typfehlern oder Linting-Problemen verursacht. Wir empfehlen dringend, Builds erst dann in die Produktion zu übernehmen, nachdem die statische Analyse abgeschlossen ist. Wenn Sie auf Vercel bereitstellen, können Sie die Anleitung für Staging-Bereitstellungen konsultieren, um zu erfahren, wie Sie Builds in die Produktion übernehmen, nachdem benutzerdefinierte Aufgaben erfolgreich waren.

Sourcemaps deaktivieren

Die Generierung von Sourcemaps verbraucht während des Build-Prozesses zusätzlichen Arbeitsspeicher.

Sie können die Generierung von Sourcemaps deaktivieren, indem Sie productionBrowserSourceMaps: false und experimental.serverSourceMaps: false zu Ihrer Next.js-Konfiguration hinzufügen.

Hinweis: Einige Plugins können Sourcemaps aktivieren und erfordern möglicherweise eine benutzerdefinierte Konfiguration zur Deaktivierung.

Edge-Speicherprobleme

Next.js v14.1.3 hat ein Speicherproblem bei Verwendung der Edge-Laufzeit behoben. Bitte aktualisieren Sie auf diese Version (oder höher), um zu sehen, ob dies Ihr Problem behebt.