Optimierung des Package-Bundlings

Das Bündeln externer Pakete kann die Leistung Ihrer Anwendung erheblich verbessern. Standardmäßig werden Pakete, die in Server Components und Route Handlers importiert werden, automatisch von Next.js gebündelt. Diese Seite führt Sie durch die Analyse und weitere Optimierung des Package-Bundlings.

Analyse von JavaScript-Bundles

@next/bundle-analyzer ist ein Plugin für Next.js, das Ihnen hilft, die Größe Ihrer Anwendungs-Bundles zu verwalten. Es generiert einen visuellen Bericht über die Größe jedes Pakets und seiner Abhängigkeiten. Sie können diese Informationen nutzen, um große Abhängigkeiten zu entfernen, Ihren Code aufzuteilen oder lazy zu laden.

Installation

Installieren Sie das Plugin mit folgendem Befehl:

npm i @next/bundle-analyzer
# oder
yarn add @next/bundle-analyzer
# oder
pnpm add @next/bundle-analyzer

Fügen Sie dann die Einstellungen des Bundle-Analyzers zu Ihrer next.config.js hinzu.

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

Generierung eines Berichts

Führen Sie folgenden Befehl aus, um Ihre Bundles zu analysieren:

ANALYZE=true npm run build
# oder
ANALYZE=true yarn build
# oder
ANALYZE=true pnpm build

Der Bericht öffnet drei neue Tabs in Ihrem Browser, die Sie untersuchen können. Die regelmäßige Bewertung Ihrer Anwendungs-Bundles hilft Ihnen, die Leistung Ihrer Anwendung langfristig zu erhalten.

Optimierung von Paketimporten

Einige Pakete, wie z.B. Icon-Bibliotheken, können Hunderte von Modulen exportieren, was zu Leistungsproblemen in Entwicklung und Produktion führen kann.

Sie können die Importe dieser Pakete optimieren, indem Sie die Option optimizePackageImports zu Ihrer next.config.js hinzufügen. Diese Option lädt nur die Module, die Sie tatsächlich verwenden, während Sie den Komfort behalten, Importanweisungen mit vielen benannten Exporten zu schreiben.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

Next.js optimiert auch einige Bibliotheken automatisch, daher müssen sie nicht in die optimizePackageImports-Liste aufgenommen werden. Siehe die vollständige Liste.

Ausschluss spezifischer Pakete vom Bündeln

Da Pakete, die in Server Components und Route Handlers importiert werden, standardmäßig von Next.js gebündelt werden, können Sie spezifische Pakete vom Bündeln ausschließen, indem Sie die Option serverExternalPackages in Ihrer next.config.js verwenden.

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

Next.js enthält eine Liste beliebter Pakete, die derzeit an der Kompatibilität arbeiten und automatisch ausgeschlossen werden. Siehe die vollständige Liste.