cssChunking

CSS Chunking ist eine Strategie zur Verbesserung der Leistung Ihrer Webanwendung, bei der CSS-Dateien in Chunks aufgeteilt und neu angeordnet werden. Dadurch können Sie nur das CSS laden, das für eine bestimmte Route benötigt wird, anstatt das gesamte CSS der Anwendung auf einmal zu laden.

Sie können steuern, wie CSS-Dateien aufgeteilt werden, indem Sie die Option experimental.cssChunking in Ihrer next.config.js-Datei verwenden:

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // Standardwert
  },
} satisfies NextConfig

export default nextConfig

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

module.exports = nextConfig

Optionen

• true (Standard): Next.js versucht, CSS-Dateien nach Möglichkeit zusammenzuführen, indem explizite und implizite Abhängigkeiten zwischen Dateien anhand der Importreihenfolge ermittelt werden, um die Anzahl der Chunks und somit die Anzahl der Anfragen zu reduzieren.
• false: Next.js wird nicht versuchen, Ihre CSS-Dateien zusammenzuführen oder neu anzuordnen.
• 'strict': Next.js lädt CSS-Dateien in der exakten Reihenfolge, in der sie in Ihren Dateien importiert werden, was zu mehr Chunks und Anfragen führen kann.

Sie sollten 'strict' in Betracht ziehen, wenn Sie auf unerwartetes CSS-Verhalten stoßen. Beispiel: Wenn Sie a.css und b.css in verschiedenen Dateien in unterschiedlicher Importreihenfolge laden (a vor b oder b vor a), wird true die Dateien in beliebiger Reihenfolge zusammenführen und davon ausgehen, dass keine Abhängigkeiten zwischen ihnen bestehen. Falls jedoch b.css von a.css abhängt, sollten Sie 'strict' verwenden, um die Zusammenführung zu verhindern und die Dateien stattdessen in der Importreihenfolge zu laden - was zu mehr Chunks und Anfragen führen kann.

Für die meisten Anwendungen empfehlen wir true, da dies zu weniger Anfragen und besserer Leistung führt.