cssChunking

CSS 分塊 (CSS Chunking) 是一種透過將 CSS 檔案拆分並重新排序成區塊來提升網頁應用程式效能的策略。這讓您可以只載入特定路由所需的 CSS，而非一次性載入所有應用程式的 CSS。

您可以在 next.config.js 檔案中使用 experimental.cssChunking 選項來控制 CSS 檔案的分塊方式：

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 後 b，或先 b 後 a）導入 a.css 和 b.css 時，true 會以任意順序合併檔案並假設它們之間沒有依賴關係。然而，若 b.css 依賴於 a.css，您可能需要使用 'strict' 來避免檔案被合併，而是按照導入順序載入它們——這可能會產生更多區塊與請求。

對於大多數應用程式，我們建議使用 true，因為它能減少請求次數並提供更好的效能。