cssChunking

Le découpage CSS (CSS Chunking) est une stratégie utilisée pour améliorer les performances de votre application web en divisant et en réorganisant les fichiers CSS en morceaux. Cela vous permet de charger uniquement le CSS nécessaire pour une route spécifique, au lieu de charger tout le CSS de l'application en une seule fois.

Vous pouvez contrôler la manière dont les fichiers CSS sont découpés en utilisant l'option experimental.cssChunking dans votre fichier next.config.js :

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // valeur par défaut
  },
} satisfies NextConfig

export default nextConfig

Options

• true (par défaut) : Next.js tentera de fusionner les fichiers CSS lorsque possible, en déterminant les dépendances explicites et implicites entre les fichiers à partir de l'ordre d'importation, afin de réduire le nombre de morceaux et donc le nombre de requêtes.
• false : Next.js n'essaiera pas de fusionner ou de réorganiser vos fichiers CSS.
• 'strict' : Next.js chargera les fichiers CSS dans l'ordre exact où ils sont importés dans vos fichiers, ce qui peut entraîner plus de morceaux et de requêtes.

Vous pourriez envisager d'utiliser 'strict' si vous rencontrez des comportements CSS inattendus. Par exemple, si vous importez a.css et b.css dans différents fichiers en utilisant un ordre d'importation différent (a avant b, ou b avant a), true fusionnera les fichiers dans n'importe quel ordre et supposera qu'il n'y a pas de dépendances entre eux. Cependant, si b.css dépend de a.css, vous pourriez vouloir utiliser 'strict' pour empêcher la fusion des fichiers et plutôt les charger dans l'ordre où ils sont importés - ce qui peut entraîner plus de morceaux et de requêtes.

Pour la plupart des applications, nous recommandons true car cela entraîne moins de requêtes et de meilleures performances.