cssChunking

CSS Chunking は、CSS ファイルを分割および並べ替えてチャンクにまとめることで、Web アプリケーションのパフォーマンスを向上させるための戦略です。これにより、アプリケーションのすべての CSS を一度に読み込むのではなく、特定のルートに必要な CSS のみを読み込むことができます。

CSS ファイルのチャンク化の方法は、next.config.js ファイルの experimental.cssChunking オプションを使用して制御できます。

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

オプション

• true (デフォルト)：Next.js は、可能な限り CSS ファイルをマージしようとします。これにより、チャンクの数、ひいてはリクエストの数を減らすために、ファイル間の明示的および暗黙的な依存関係をインポート順序から判断します。
• false：Next.js は、CSS ファイルのマージまたは並べ替えを試みません。
• 'strict'：Next.js は、ファイルにインポートされた順序で CSS ファイルを読み込みます。これにより、チャンクやリクエストが増加する可能性があります。

予期しない CSS の動作が発生した場合は、'strict' の使用を検討してください。たとえば、異なるファイルで a.css と b.css を異なる import 順序 (a が b より前、または b が a より前) でインポートした場合、true はファイルを任意の順序でマージし、それらの間に依存関係がないと想定します。しかし、b.css が a.css に依存している場合、ファイルをマージしないように 'strict' を使用したい場合があります。代わりに、インポートされた順序で読み込みます。これは、より多くのチャンクとリクエストにつながる可能性があります。

ほとんどのアプリケーションでは、リクエスト数が少なく、パフォーマンスが向上するため、true をお勧めします。