Analyseur de bundles

@next/bundle-analyzer est un plugin pour Next.js qui vous aide à gérer la taille de vos modules JavaScript. Il génère un rapport visuel de la taille de chaque module et de ses dépendances. Vous pouvez utiliser ces informations pour supprimer des dépendances volumineuses, diviser votre code ou ne charger certaines parties que lorsque nécessaire, réduisant ainsi la quantité de données transférées au client.

Installation

Installez le plugin en exécutant la commande suivante :

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

Ensuite, ajoutez les paramètres de l'analyseur de bundles à votre fichier next.config.js.

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

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

module.exports = withBundleAnalyzer(nextConfig)

Analyse de vos bundles

Exécutez la commande suivante pour analyser vos bundles :

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

Le rapport ouvrira trois nouveaux onglets dans votre navigateur que vous pourrez inspecter. Effectuer cette analyse régulièrement pendant le développement et avant le déploiement de votre site peut vous aider à identifier rapidement les bundles volumineux et à concevoir une application plus performante.