跳到內容
配置next.config.jsinlineCss

inlineCss

此功能目前處於實驗階段，可能會有所更改，不建議用於生產環境。歡迎試用並在 GitHub 上分享您的反饋。

用法

實驗性支援在 <head> 中內聯 CSS。啟用此標誌後，所有通常生成 <link> 標籤的地方都將改為生成 <style> 標籤。

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}
 
export default nextConfig

權衡

何時使用內聯 CSS

內聯 CSS 在以下幾種場景中可能很有益

  • 首次訪問者：由於 CSS 檔案是渲染阻塞資源，內聯消除了首次訪問者遇到的初始下載延遲，從而提高了頁面載入效能。

  • 效能指標：透過消除 CSS 檔案的額外網路請求，內聯可以顯著提高關鍵指標，如首次內容繪製 (FCP) 和最大內容繪製 (LCP)。

  • 慢速連線：對於使用較慢網路的使用者，每個請求都會增加相當大的延遲，內聯 CSS 可以透過減少網路往返次數來顯著提高效能。

  • 原子 CSS 包（例如 Tailwind）：對於像 Tailwind CSS 這樣的實用工具優先框架，頁面所需的樣式大小通常與設計的複雜性呈 O(1) 關係。這使得內聯成為一個引人注目的選擇，因為當前頁面的所有樣式集都很輕巧，並且不會隨頁面大小而增長。內聯 Tailwind 樣式可確保最小的有效負載，並消除了對額外網路請求的需求，從而進一步提高效能。

何時不使用內聯 CSS

雖然內聯 CSS 對效能有顯著好處，但在某些情況下它可能不是最佳選擇

  • 大型 CSS 包：如果您的 CSS 包太大，內聯它可能會顯著增加 HTML 的大小，導致首次位元組時間 (TTFB) 變慢，並可能對慢速連線的使用者造成更差的效能。

  • 動態或特定於頁面的 CSS：對於具有高度動態樣式或使用不同 CSS 集的應用程式，內聯可能會導致冗餘和臃腫，因為所有頁面的完整 CSS 可能需要重複內聯。

  • 瀏覽器快取：在訪問者頻繁返回您的站點的情況下，外部 CSS 檔案允許瀏覽器有效地快取樣式，減少後續訪問的資料傳輸。內聯 CSS 會消除此優勢。

仔細評估這些權衡，並考慮將內聯與其他策略（例如關鍵 CSS 提取或混合方法）相結合，以獲得針對您的網站需求量身定製的最佳結果。

須知:

此功能目前處於實驗階段，並有一些已知限制

  • CSS 內聯全域性應用，不能按頁面配置
  • 樣式在初始頁面載入期間會重複 - 在 SSR 的 <style> 標籤中一次，在 RSC 有效負載中一次
  • 導航到靜態渲染的頁面時，樣式將使用 <link> 標籤而不是內聯 CSS，以避免重複
  • 此功能在開發模式下不可用，僅適用於生產構建