cssChunking

CSS 分塊是一種用於提升 Web 應用程式效能的策略，透過將 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'。例如，如果您在使用不同的 import 順序（a 在 b 之前，或 b 在 a 之前）的不同檔案中匯入 a.css 和 b.css，true 將以任何順序合併檔案，並假設它們之間沒有相依性。但是，如果 b.css 依賴於 a.css，您可能需要使用 'strict' 來防止檔案被合併，而是按照它們被匯入的順序載入 - 這可能會導致更多的區塊和請求。

對於大多數應用程式，我們建議使用 true，因為它可以減少請求並提升效能。