Bundle Analyzer

@next/bundle-analyzer ist ein Plugin für Next.js, das Ihnen hilft, die Größe Ihrer JavaScript-Module zu verwalten. Es generiert einen visuellen Bericht über die Größe jedes Moduls und seiner Abhängigkeiten. Sie können diese Informationen nutzen, um große Abhängigkeiten zu entfernen, Ihren Code aufzuteilen oder nur bestimmte Teile bei Bedarf zu laden, wodurch die Menge der an den Client übertragenen Daten reduziert wird.

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.

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

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

module.exports = withBundleAnalyzer(nextConfig)

Analyse Ihrer Bundles

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. Wenn Sie dies regelmäßig während der Entwicklung und vor dem Deployment Ihrer Website durchführen, können Sie große Bundles früher identifizieren und Ihre Anwendung für bessere Performance optimieren.