Comment optimiser l'empaquetage des packages

Le regroupement de paquets externes peut considérablement améliorer les performances de votre application. Par défaut, les paquets importés dans votre application ne sont pas regroupés. Cela peut impacter les performances ou ne pas fonctionner si les paquets externes ne sont pas pré-regroupés, par exemple s'ils sont importés depuis un monorepo ou node_modules. Cette page vous guidera pour analyser et configurer 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.

Regroupement de paquets spécifiques

Pour regrouper des paquets spécifiques, vous pouvez utiliser l'option transpilePackages dans votre next.config.js. Cette option est utile pour regrouper des paquets externes qui ne sont pas pré-regroupés, par exemple dans un monorepo ou importés depuis node_modules.

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

module.exports = nextConfig

Regroupement de tous les paquets

Pour regrouper automatiquement tous les paquets (comportement par défaut dans le routeur App), vous pouvez utiliser l'option bundlePagesRouterDependencies dans votre next.config.js.

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

module.exports = nextConfig

Exclusion de paquets spécifiques du regroupement

Si vous avez activé l'option bundlePagesRouterDependencies, vous pouvez exclure des paquets spécifiques du regroupement automatique en utilisant l'option serverExternalPackages dans votre next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Regroupement automatique des paquets externes dans le routeur Pages :
  bundlePagesRouterDependencies: true,
  // Exclusion de paquets spécifiques du regroupement pour les routeurs App et Pages :
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig