設定next.config.jscssChunking

cssChunking

この機能は現在実験段階であり、変更される可能性があります。本番環境での使用は推奨されません。ぜひ試用して、GitHubでフィードバックを共有してください。

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

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

next.config.ts

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 を推奨します。

この情報は役に立ちましたか？