cssChunking

CSSチャンク化は、CSSファイルをチャンクに分割して並べ替えることで、ウェブアプリケーションのパフォーマンスを向上させるための戦略です。これにより、アプリケーション全体のCSSを一度にロードする代わりに、特定のルートに必要なCSSのみをロードできます。

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

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

オプション

• 'loose'（デフォルト）: Next.jsは可能な限りCSSファイルをマージしようとします。インポート順からファイル間の明示的および暗黙的な依存関係を判断して、チャンク数を減らし、リクエスト数を減らします。
• 'strict': Next.jsは、ファイルにインポートされた順序でCSSファイルをロードします。これにより、チャンク数とリクエスト数が増える可能性があります。

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

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