Comment optimiser le regroupement de paquets

Le regroupement de paquets externes peut considérablement améliorer les performances de votre application. Par défaut, les paquets importés dans les composants serveur et les gestionnaires de route sont automatiquement regroupés par Next.js. Cette page vous guidera pour analyser et optimiser davantage le regroupement de paquets.

Analyse des bundles JavaScript

@next/bundle-analyzer est un plugin pour Next.js qui vous aide à gérer la taille des bundles de votre application. Il génère un rapport visuel de la taille de chaque paquet et de ses dépendances. Vous pouvez utiliser ces informations pour supprimer les dépendances volumineuses, diviser ou charger en différé votre code.

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 bundle à votre next.config.js.

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

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

module.exports = withBundleAnalyzer(nextConfig)

Génération d'un rapport

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. Évaluer périodiquement les bundles de votre application peut vous aider à maintenir les performances de l'application au fil du temps.

Optimisation des imports de paquets

Certains paquets, comme les bibliothèques d'icônes, peuvent exporter des centaines de modules, ce qui peut causer des problèmes de performance en développement et en production.

Vous pouvez optimiser la façon dont ces paquets sont importés en ajoutant l'option optimizePackageImports à votre next.config.js. Cette option ne chargera que les modules que vous utilisez réellement, tout en vous permettant d'écrire des instructions d'import avec de nombreuses exportations nommées.

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

module.exports = nextConfig

Next.js optimise également automatiquement certaines bibliothèques, qui n'ont donc pas besoin d'être incluses dans la liste optimizePackageImports. Consultez la liste complète.

Exclusion de paquets spécifiques du regroupement

Comme les paquets importés dans les composants serveur et les gestionnaires de route sont automatiquement regroupés par Next.js, vous pouvez exclure des paquets spécifiques du regroupement en utilisant l'option serverExternalPackages dans votre next.config.js.

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

module.exports = nextConfig

Next.js inclut une liste de paquets populaires qui travaillent actuellement sur la compatibilité et sont automatiquement exclus. Consultez la liste complète.