cssChunking

CSS 청크 분할은 CSS 파일을 청크로 나누고 재정렬하여 웹 애플리케이션의 성능을 향상시키는 전략입니다. 이를 통해 애플리케이션의 모든 CSS를 한 번에 로드하는 대신 특정 경로에 필요한 CSS만 로드할 수 있습니다.

next.config.js 파일에서 experimental.cssChunking 옵션을 사용하여 CSS 파일의 청크 분할 방식을 제어할 수 있습니다:

next.config.ts

import type { NextConfig } from "next";
 
const nextConfig = {
  experimental: {
    cssChunking: "loose", // 기본값
  },
} satisfies NextConfig;
 
export default nextConfig;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: "loose", // 기본값
  },
};
 
module.exports = nextConfig;

옵션

'loose' (기본값): Next.js는 가능한 한 CSS 파일을 병합하려고 시도하며, 파일 간의 명시적 및 암시적 종속성을 가져오기 순서에서 결정하여 청크 수와 따라서 요청 수를 줄입니다.
'strict': Next.js는 파일에 가져온 올바른 순서대로 CSS 파일을 로드하며, 이는 더 많은 청크와 요청으로 이어질 수 있습니다.

예기치 않은 CSS 동작이 발생하는 경우 'strict' 사용을 고려해 볼 수 있습니다. 예를 들어, 다른 파일에서 다른 import 순서(a 전에 b, 또는 b 전에 a)로 a.css와 b.css를 가져오는 경우, 'loose'는 파일을 임의의 순서로 병합하고 파일 간에 종속성이 없다고 가정합니다. 그러나 b.css가 a.css에 의존한다면, 'strict'를 사용하여 파일이 병합되는 것을 방지하고 대신 가져온 순서대로 로드하도록 할 수 있습니다 - 이는 더 많은 청크와 요청으로 이어질 수 있습니다.

대부분의 애플리케이션에서는 요청 수가 적고 성능이 더 좋기 때문에 'loose'를 권장합니다.

crossOrigin devIndicators