cssChunking

CSS Chunking (Fragmentación de CSS) es una estrategia utilizada para mejorar el rendimiento de su aplicación web dividiendo y reordenando archivos CSS en fragmentos. Esto permite cargar solo el CSS necesario para una ruta específica, en lugar de cargar todo el CSS de la aplicación de una vez.

Puede controlar cómo se fragmentan los archivos CSS usando la opción experimental.cssChunking en su archivo next.config.js:

import type { NextConfig } from 'next'

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

export default nextConfig

Opciones

• true (predeterminado): Next.js intentará fusionar archivos CSS cuando sea posible, determinando dependencias explícitas e implícitas entre archivos según el orden de importación para reducir el número de fragmentos y, por lo tanto, el número de solicitudes.
• false: Next.js no intentará fusionar ni reordenar sus archivos CSS.
• 'strict': Next.js cargará los archivos CSS en el orden correcto en que se importan en sus archivos, lo que puede generar más fragmentos y solicitudes.

Puede considerar usar 'strict' si encuentra comportamientos inesperados en el CSS. Por ejemplo, si importa a.css y b.css en diferentes archivos usando un orden de importación diferente (a antes de b, o b antes de a), true fusionará los archivos en cualquier orden y asumirá que no hay dependencias entre ellos. Sin embargo, si b.css depende de a.css, puede que desee usar 'strict' para evitar que los archivos se fusionen y, en su lugar, cargarlos en el orden en que se importan, lo que puede resultar en más fragmentos y solicitudes.

Para la mayoría de las aplicaciones, recomendamos true ya que genera menos solicitudes y un mejor rendimiento.