cssChunking

CSS Chunking (разбиение CSS) — это стратегия, используемая для повышения производительности веб-приложения путем разделения и переупорядочивания CSS-файлов на чанки. Это позволяет загружать только те CSS-стили, которые необходимы для конкретного маршрута, вместо загрузки всех стилей приложения сразу.

Вы можете управлять разбиением CSS-файлов с помощью опции experimental.cssChunking в файле next.config.js:

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // значение по умолчанию
  },
} satisfies NextConfig

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: true, // значение по умолчанию
  },
}

module.exports = nextConfig

Настройки

• true (по умолчанию): Next.js будет пытаться объединять CSS-файлы, когда это возможно, определяя явные и неявные зависимости между файлами на основе порядка импорта, чтобы уменьшить количество чанков и, следовательно, количество запросов.
• false: Next.js не будет пытаться объединять или переупорядочивать ваши CSS-файлы.
• 'strict': Next.js будет загружать CSS-файлы в том порядке, в котором они импортируются в ваши файлы, что может привести к увеличению количества чанков и запросов.

Вы можете рассмотреть использование 'strict', если столкнётесь с неожиданным поведением CSS. Например, если вы импортируете a.css и b.css в разных файлах в разном порядке (a перед b или b перед a), значение true объединит файлы в любом порядке и предположит, что между ними нет зависимостей. Однако, если b.css зависит от a.css, вам может потребоваться использовать 'strict', чтобы предотвратить объединение файлов и вместо этого загружать их в порядке импорта — что может привести к увеличению количества чанков и запросов.

Для большинства приложений мы рекомендуем значение true, так как оно приводит к меньшему количеству запросов и лучшей производительности.