如果你使用過 React，很可能接觸過 CSS-in-JS 的概念。CSS-in-JS 通過讓我們將樣式與組件共置，徹底改變了 React 組件的樣式編寫思路，使我們能夠充分利用 JavaScript 的強大能力實現動態樣式。

任何強大工具都存在取舍，CSS-in-JS 也存在權衡取舍。其中最突出的問題是性能開銷。本文將探討 CSS-in-JS 中的靜態提取如何幫助緩解性能問題，從而打造更快速、更高效的 React 應用。

CSS-in-JS 的運行時性能問題

以 styled-components 為例，典型的 CSS-in-JS 使用場景如下：

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;

  &:hover {
    background-color: #0056b3;
  }
`;

在運行時，瀏覽器需要執行以下操作：

1. 解析模板字符串
2. 生成唯一類名
3. 將樣式注入 DOM
4. 關聯類名與組件

當應用包含大量組件時，這些重復的運行時操作會導致明顯的性能損耗，特別是對于本質上靜態的樣式內容。

靜態提取的核心原理

靜態提取通過在構建時（即 Vite、webpack 等打包工具處理代碼時）分析 CSS-in-JS 代碼，識別不依賴 props 或狀態的樣式。由于這些樣式被視為靜態內容，它們會被“提取”到常規 CSS 文件中，這意味著我們的 React 應用在運行時無需再為這些樣式執行 JavaScript！

處理流程示例

構建前（開發階段）：

const Button = styled.button`
  background-color: #007bff; // 靜態樣式
  color: ${props => props.color}; // 動態樣式
`;

構建后（生產環境）：

• 提取的靜態 CSS 文件（button.css）：

.sc-button {
  background-color: #007bff;
}

• 運行時僅處理動態部分：

const styleProps = { color: 'white' };

動靜結合的處理策略

實際項目中，樣式通常包含靜態和動態部分：

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ${props => props.highlighted && `
    border: 2px solid #007bff;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.2);
  `}
`;

靜態提取技術會：

• 將基礎樣式（background、padding 等）提取為靜態 CSS
• 保留動態條件樣式在運行時處理

配置與實現方法

Babel 插件配置

大多數 CSS-in-JS 庫通過 Babel 插件實現靜態提?。?/span>

npm install babel-plugin-styled-components

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    [
      'babel-plugin-styled-components',
      {
        displayName: true,  // 調試時顯示組件名
        pure: true          // 啟用靜態分析
      }
    ]
  ]
};

pure: true 參數啟用靜態分析功能，識別可提取的純靜態樣式。

不同庫的差異化方案

CSS-in-JS 生態圍繞靜態提取發展出不同的設計理念。本節我們將深入探討這些庫如何實現靜態提取概念。

styled-components

盡管我們使用 styled-components 作為靜態提取的示例，但它并不官方支持傳統靜態提取。正如某項目成員（聯合創始人）在 GitHub 議題 中解釋的，這是其有意為之的選擇：

“我們不支持靜態 CSS 提取……靜態提取不生成動態 CSS，這意味著在 JavaScript 執行前頁面可能顯示異常，或者你需要延遲加載直到 JavaScript 加載完成。”

相反，styled-components 專注于：

• 僅針對初始渲染發送關鍵 CSS 的服務端渲染（SSR）
• 通過批處理和優化實現高效運行時注入
• 保持樣式順序以確保特異性可預測

babel-plugin-styled-components 中的 pure: true 選項實際上并不提取 CSS 文件，而是將組件標記為無副作用，以實現更好的搖樹優化和死代碼消除。

Emotion

Emotion 最初支持靜態提取，但在 版本 10 中棄用。其理由非常務實：

“隨著 Emotion 性能不斷提升，以及組合等功能加入，靜態提取的重要性逐漸降低……像 linaria 這樣的庫在靜態提取方面做得很好，而且它們的開發團隊專注于解決這個特定問題?！?/span>

當 Emotion 支持提取時，配置如下：

// .babelrc
{
  "plugins": [["emotion", { "extractStatic": true }]]
}

這會為無插值的樣式生成獨立的 .emotion.css 文件。但該方案破壞了組合模式，限制了庫的靈活性。

Linaria

Linaria 采用完全不同的方案——它是零運行時 CSS-in-JS。所有內容都在構建時提?。?/span>

import { css } from '@linaria/core';
import { styled } from '@linaria/react';

const button = css`
  background-color: #007bff;
  color: white;
`;

const Button = styled.button`
  padding: 12px 24px;
  border-radius: 4px;
`;

Linaria 將其編譯為純 CSS 文件，完全不產生運行時開銷。它甚至提供 collect 輔助函數用于關鍵 CSS 提?。?/span>

import { collect } from '@linaria/server';

const { critical, other } = collect(html, css);
// critical: 初始渲染所需 CSS
// other: 可異步加載的 CSS

Astroturf

Astroturf 介于 Linaria 和傳統 CSS-in-JS 之間，為不同用例提供多種 API：

import { css, stylesheet } from 'astroturf';

// 單類提取
const btnClass = css`
  color: blue;
  border: 1px solid blue;
`;

// 完整樣式表提取
const styles = stylesheet`
  .btn {
    padding: 0.5rem 1rem;
  }
  
  .primary {
    background-color: blue;
  }
`;

對于動態值，Astroturf 巧妙地將插值編譯為 CSS 自定義屬性：

function Button({ bgColor }) {
  return (
    <button
      css={css`
        background-color: ${bgColor};
      `}
    >
      點擊我
    </button>
  );
}
// 編譯為：background-color: var(--bgColor);

Astroturf 提供靈活的靜態提取選項：

import { css, stylesheet } from 'astroturf';

// 提取單個類
const highlighted = css`
  border: 2px solid #007bff;
`;

// 提取完整樣式表
const styles = stylesheet`
  .card {
    background: white;
    padding: 24px;
  }
`;

動態值通過 CSS 自定義屬性處理：

function Button({ bgColor }) {
  return (
    <button css={css`background: ${bgColor};`}>
      點擊我
    </button>
  );
}
// 編譯結果：background: var(--bgColor);

技術選型指南

適用 styled-components + SSR 的場景

• 開發體驗為最高優先級
• 已具備 SSR 基礎設施
• 性能要求非極端苛刻

適用 Linaria 或 Astroturf 的場景

• 要求零運行時開銷
• 構建性能敏感型應用（電商、新聞等）
• 可接受構建時的特定限制

適用傳統 CSS 的場景

• 需要完全控制 CSS 加載流程
• 堅持關注點分離原則
• 認為 CSS-in-JS 方案過于復雜

總結

CSS-in-JS 靜態提取技術為前端性能優化提供了重要手段。實際應用中需要：

1. 理解技術權衡：不同方案在開發體驗、運行時性能和構建復雜度之間存在平衡關系
2. 基于需求選擇：根據項目類型、性能要求和團隊技術棧做出合理選擇
3. 數據驅動優化：通過性能測試和監控驗證優化效果，避免主觀判斷

有效的性能優化應聚焦于實際用戶體驗提升，而非單純追求技術完美性。選擇適合項目特定需求的最佳平衡點，是實現高效開發與優異性能的關鍵。