メインコンテンツまでスキップ

cssChunking

CSSのチャンク化は、CSSファイルをチャンクごとに分割し、再配置することで、Webアプリケーションのパフォーマンスを向上させる戦略です。これにより、アプリケーション全体の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

オプション

  • 'loose' (デフォルト): Next.jsはできる限りCSSファイルを結合し、ファイル間の依存関係を明示的および暗黙的にimport順に判断してチャンク数を減らし、リクエスト数を減らします
  • 'strict': Next.jsは、ファイルにimportされた順序で正確にCSSファイルを読み込みますが、これによりチャンクやリクエストが増えることがあります

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

多くのアプリケーションでは、リクエスト数が少なく、より良いパフォーマンスを実現するために 'loose' をお勧めします。