CSS 分塊

CSS 分塊是一種用於提升網頁應用程式效能的策略，它會將 CSS 檔案分割並重新排序成多個區塊。這讓您可以只載入特定路由所需的 CSS，而不是一次載入所有應用程式的 CSS。

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

import type { NextConfig } from 'next'
 
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // default
  },
} satisfies NextConfig
 
export default nextConfig

選項

• 'loose'（預設）：Next.js 會盡可能合併 CSS 檔案，根據檔案的引入順序判斷檔案之間的顯式和隱式依賴關係，以減少區塊數量，進而減少請求數量。
• 'strict'：Next.js 會按照 CSS 檔案引入到檔案中的正確順序載入它們，這可能會導致更多的區塊和請求。

如果您遇到非預期的 CSS 行為，可以考慮使用 'strict'。例如，如果您在不同的檔案中以不同的 import 順序（a 在 b 之前，或 b 在 a 之前）引入 a.css 和 b.css，'loose' 會以任意順序合併檔案，並假設它們之間沒有依賴關係。但是，如果 b.css 依賴於 a.css，您可能需要使用 'strict' 來防止檔案被合併，而是按照它們被引入的順序載入它們，這可能會導致更多的區塊和請求。

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