Optimierung von Bundling

Das Bundling externer Pakete kann die Leistung Ihrer Anwendung erheblich verbessern. Standardmäßig werden in Ihre Anwendung importierte Pakete nicht gebündelt. Dies kann die Leistung beeinträchtigen oder möglicherweise nicht funktionieren, wenn externe Pakete nicht vorgebündelt sind, beispielsweise wenn sie aus einem Monorepo oder node_modules importiert werden. Diese Seite wird Sie durch die Analyse und Konfiguration des Paket-Bundlings führen.

Analysieren 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 der einzelnen Pakete und deren Abhängigkeiten. Sie können die Informationen nutzen, um große Abhängigkeiten zu entfernen, zu teilen oder Ihren Code lazy zu laden.

Installation

Installieren Sie das Plugin durch Ausführen des folgenden Befehls:

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)

Generieren eines Berichts

Führen Sie den 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. Eine regelmäßige Bewertung der Bundles Ihrer Anwendung kann Ihnen helfen, die Leistung im Laufe der Zeit zu erhalten.

Optimieren von Paket-Importen

Einige Pakete, wie Bibliotheken mit Icons, können Hunderte von Modulen exportieren, was Leistungsprobleme in Entwicklung und Produktion verursachen kann.

Sie können die Art und Weise, wie diese Pakete importiert werden, 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 Ihnen weiterhin die Bequemlichkeit bietet, Import-Anweisungen mit vielen benannten Exporten zu schreiben.

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

Next.js optimiert einige Bibliotheken auch automatisch, sodass sie nicht in die Liste von optimizePackageImports aufgenommen werden müssen. Sehen Sie sich die vollständige Liste an.

Bundling bestimmter Pakete

Um bestimmte Pakete zu bündeln, können Sie die Option transpilePackages in Ihrer next.config.js verwenden. Diese Option ist nützlich, um externe Pakete zu bündeln, die nicht vorgebündelt sind, beispielsweise in einem Monorepo oder aus node_modules importiert.

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

Bundling aller Pakete

Um alle Pakete automatisch 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

Ausnahmen für bestimmte Pakete beim Bundling

Wenn die Option bundlePagesRouterDependencies aktiviert ist, können Sie bestimmte Pakete vom automatischen Bundling ausnehmen, indem Sie die Option serverExternalPackages in Ihrer next.config.js verwenden:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Externe Pakete im Pages Router automatisch bündeln:
  bundlePagesRouterDependencies: true,
  // Bestimmte Pakete für App und Pages Router vom Bundling ausschließen:
  serverExternalPackages: ['package-name'],
}
 
module.exports = nextConfig