Optimierung des Paket-Bundlings

Das Bundling externer Pakete kann die Leistung Ihrer Anwendung erheblich verbessern. Standardmäßig werden Pakete, die innerhalb von Server-Komponenten und Route-Handlern importiert werden, von Next.js automatisch gebündelt. Diese Seite wird Sie durch die Analyse und weitere Optimierung 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.

Ausnahmen für bestimmte Pakete beim Bundling

Da Pakete, die in Server-Komponenten und Route-Handlern importiert werden, von Next.js automatisch gebündelt werden, können Sie bestimmte Pakete vom Bundling ausnehmen, 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 ausgenommen werden. Sehen Sie sich die vollständige Liste an.