CSS-Aufteilung

CSS-Aufteilung ist eine Strategie zur Leistungsverbesserung Ihrer Webanwendung durch Aufteilung und Neuanordnung von CSS-Dateien in Fragmente. Dies ermöglicht es, nur das CSS zu laden, das für eine bestimmte Route benötigt wird, anstatt die gesamte CSS der Anwendung auf einmal zu laden.

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

import type { NextConfig } from 'next'
 
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // Standard
  },
} satisfies NextConfig
 
export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // Standard
  },
}
 
module.exports = nextConfig

Optionen

• 'loose' (Standard): Next.js versucht, CSS-Dateien nach Möglichkeit zusammenzuführen und bestimmt explizite und implizite Abhängigkeiten zwischen Dateien aus der Importreihenfolge, um die Anzahl der Fragmente und damit die Anzahl der Anfragen zu reduzieren.
• 'strict': Next.js lädt CSS-Dateien in der Reihenfolge, in der sie in Ihre Dateien importiert wurden, was zu mehr Fragmenten und Anfragen führen kann.

Sie sollten 'strict' in Betracht ziehen, wenn Sie auf unerwartetes CSS-Verhalten stoßen. Wenn Sie beispielsweise a.css und b.css in verschiedenen Dateien mit unterschiedlicher Import-Reihenfolge importieren (a vor b oder b vor a), wird 'loose' die Dateien in beliebiger Reihenfolge zusammenführen und davon ausgehen, dass keine Abhängigkeiten zwischen ihnen bestehen. Wenn jedoch b.css von a.css abhängt, möchten Sie möglicherweise 'strict' verwenden, um zu verhindern, dass die Dateien zusammengeführt werden, und stattdessen diese in der Reihenfolge zu laden, in der sie importiert wurden – was zu mehr Fragmenten und Anfragen führen kann.

Für die meisten Anwendungen empfehlen wir 'loose', da es zu weniger Anfragen und besserer Leistung führt.