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

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

CSS-in-JS 的運(yùn)行時性能問題

以 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;
  }
`;

在運(yùn)行時，瀏覽器需要執(zhí)行以下操作：

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

當(dāng)應(yīng)用包含大量組件時，這些重復(fù)的運(yùn)行時操作會導(dǎo)致明顯的性能損耗，特別是對于本質(zhì)上靜態(tài)的樣式內(nèi)容。

靜態(tài)提取的核心原理

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

處理流程示例

構(gòu)建前（開發(fā)階段）：

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

構(gòu)建后（生產(chǎn)環(huán)境）：

• 提取的靜態(tài) CSS 文件（button.css）：

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

• 運(yùn)行時僅處理動態(tài)部分：

const styleProps = { color: 'white' };

動靜結(jié)合的處理策略

實(shí)際項目中，樣式通常包含靜態(tài)和動態(tài)部分：

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);
  `}
`;

靜態(tài)提取技術(shù)會：

• 將基礎(chǔ)樣式（background、padding 等）提取為靜態(tài) CSS
• 保留動態(tài)條件樣式在運(yùn)行時處理

配置與實(shí)現(xiàn)方法

Babel 插件配置

大多數(shù) CSS-in-JS 庫通過 Babel 插件實(shí)現(xiàn)靜態(tài)提?。?/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,  // 調(diào)試時顯示組件名
        pure: true          // 啟用靜態(tài)分析
      }
    ]
  ]
};

pure: true 參數(shù)啟用靜態(tài)分析功能，識別可提取的純靜態(tài)樣式。

不同庫的差異化方案

CSS-in-JS 生態(tài)圍繞靜態(tài)提取發(fā)展出不同的設(shè)計理念。本節(jié)我們將深入探討這些庫如何實(shí)現(xiàn)靜態(tài)提取概念。

styled-components

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

“我們不支持靜態(tài) CSS 提取……靜態(tài)提取不生成動態(tài) CSS，這意味著在 JavaScript 執(zhí)行前頁面可能顯示異常，或者你需要延遲加載直到 JavaScript 加載完成?！?/span>

相反，styled-components 專注于：

• 僅針對初始渲染發(fā)送關(guān)鍵 CSS 的服務(wù)端渲染（SSR）
• 通過批處理和優(yōu)化實(shí)現(xiàn)高效運(yùn)行時注入
• 保持樣式順序以確保特異性可預(yù)測

babel-plugin-styled-components 中的 pure: true 選項實(shí)際上并不提取 CSS 文件，而是將組件標(biāo)記為無副作用，以實(shí)現(xiàn)更好的搖樹優(yōu)化和死代碼消除。

Emotion

Emotion 最初支持靜態(tài)提取，但在 版本 10 中棄用。其理由非常務(wù)實(shí)：

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

當(dāng) Emotion 支持提取時，配置如下：

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

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

Linaria

Linaria 采用完全不同的方案——它是零運(yùn)行時 CSS-in-JS。所有內(nèi)容都在構(gòu)建時提?。?/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 文件，完全不產(chǎn)生運(yùn)行時開銷。它甚至提供 collect 輔助函數(shù)用于關(guān)鍵 CSS 提取：

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

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

Astroturf

Astroturf 介于 Linaria 和傳統(tǒng) 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;
  }
`;

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

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

Astroturf 提供靈活的靜態(tài)提取選項：

import { css, stylesheet } from 'astroturf';

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

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

動態(tài)值通過 CSS 自定義屬性處理：

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

技術(shù)選型指南

適用 styled-components + SSR 的場景

• 開發(fā)體驗為最高優(yōu)先級
• 已具備 SSR 基礎(chǔ)設(shè)施
• 性能要求非極端苛刻

適用 Linaria 或 Astroturf 的場景

• 要求零運(yùn)行時開銷
• 構(gòu)建性能敏感型應(yīng)用（電商、新聞等）
• 可接受構(gòu)建時的特定限制

適用傳統(tǒng) CSS 的場景

• 需要完全控制 CSS 加載流程
• 堅持關(guān)注點(diǎn)分離原則
• 認(rèn)為 CSS-in-JS 方案過于復(fù)雜

總結(jié)

CSS-in-JS 靜態(tài)提取技術(shù)為前端性能優(yōu)化提供了重要手段。實(shí)際應(yīng)用中需要：

1. 理解技術(shù)權(quán)衡：不同方案在開發(fā)體驗、運(yùn)行時性能和構(gòu)建復(fù)雜度之間存在平衡關(guān)系
2. 基于需求選擇：根據(jù)項目類型、性能要求和團(tuán)隊技術(shù)棧做出合理選擇
3. 數(shù)據(jù)驅(qū)動優(yōu)化：通過性能測試和監(jiān)控驗證優(yōu)化效果，避免主觀判斷

有效的性能優(yōu)化應(yīng)聚焦于實(shí)際用戶體驗提升，而非單純追求技術(shù)完美性。選擇適合項目特定需求的最佳平衡點(diǎn)，是實(shí)現(xiàn)高效開發(fā)與優(yōu)異性能的關(guān)鍵。