Optimierung des Package-Bundlings

Das Bündeln externer Pakete kann die Leistung Ihrer Anwendung erheblich verbessern. Standardmäßig werden Pakete, die in Ihre Anwendung importiert werden, nicht gebündelt. Dies kann die Leistung beeinträchtigen oder nicht funktionieren, wenn externe Pakete nicht vorgebündelt sind, z.B. wenn sie aus einem Monorepo oder node_modules importiert werden. Diese Seite führt Sie durch die Analyse und Konfiguration 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.

Bündeln spezifischer Pakete

Um spezifische Pakete zu bündeln, können Sie die Option transpilePackages in Ihrer next.config.js verwenden. Diese Option ist nützlich für das Bündeln externer Pakete, die nicht vorgebündelt sind, z.B. in einem Monorepo oder aus node_modules importiert werden.

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

module.exports = nextConfig

Bündeln aller Pakete

Um automatisch alle Pakete zu bündeln (Standardverhalten im App Router), können Sie die Option bundlePagesRouterDependencies in Ihrer next.config.js verwenden.

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

module.exports = nextConfig

Ausschluss spezifischer Pakete vom Bündeln

Wenn die Option bundlePagesRouterDependencies aktiviert ist, können Sie spezifische Pakete vom automatischen Bündeln ausschließen, indem Sie die Option serverExternalPackages in Ihrer next.config.js verwenden:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Automatisches Bündeln externer Pakete im Pages Router:
  bundlePagesRouterDependencies: true,
  // Spezifische Pakete vom Bündeln für App und Pages Router ausschließen:
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig