cssChunking
CSSのチャンク化は、CSSファイルをチャンクごとに分割し、再配置することで、Webアプリケーションのパフォーマンスを向上させる戦略です。これにより、アプリケーション全体のCSSを一度に読み込むのではなく、特定のルートに必要なCSSのみを読み込むことができます。
next.config.js
ファイルで experimental.cssChunking
オプションを使用して、CSSファイルのチャンク化を制御できます:
- TypeScript
- JavaScript
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ファイルを結合し、ファイル間の依存関係を明示的および暗黙的にimport順に判断してチャンク数を減らし、リクエスト数を減らします'strict'
: Next.jsは、ファイルにimportされた順序で正確にCSSファイルを読み込みますが、これによりチャンクやリクエストが増えることがあります
予期しないCSSの動作が発生した場合には、'strict'
を使用することを検討するかもしれません。たとえば、異なるファイルで異なる import
順序(a
を b
の前、または b
を a
の前)で a.css
と b.css
をインポートしている場合、'loose'
は任意の順序でファイルを結合し、それらの間に依存関係がないと仮定します。しかし、もし b.css
が a.css
に依存している場合には、ファイルが結合されるのを防ぎ、インポートされた順序で読み込ませるために 'strict'
を使用するほうがよいかもしれません。これは、より多くのチャンクとリクエストにつながる可能性があります。
多くのアプリケーションでは、リクエスト数が少なく、より良いパフォーマンスを実現するために 'loose'
をお勧めします。