Linaria能消除运行时样式计算，因其在构建阶段静态分析CSS模板字面量，将可求值样式转为独立CSS文件，运行时仅应用类名，不执行任何样式生成逻辑，彻底移除insertRule、动态style标签等同步开销。
为什么Linaria能消除运行时样式计算
Linaria 的核心机制是在构建阶段（比如 vite build 或 webpack 打包时）静态分析模板字符串，把不依赖 props 或组件状态的样式直接转成标准 CSS 文件，运行时完全不执行样式生成逻辑。这意味着：css 函数、styled 调用、甚至整个 @linaria/react 包在生产环境里都会被 tree-shaken 掉。
- 它不支持运行时动态插值（如
color: ${props => props.color}），这是换取零开销的明确约束 - 所有样式必须是“可静态求值”的：常量、字面量、纯函数调用（需配置 Babel 插件识别）
- 编译后生成的 CSS 文件会被自动注入
<head>，和传统 CSS 无异，浏览器直接复用渲染管线
Linaria 在 Vite 中的最小可行配置
Vite 用户最容易踩的坑是没配好预处理器或忽略 CSS 输出路径。Linaria 默认不会生成独立 CSS 文件，需显式启用 outputCss: true：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import linaria from '@linaria/vite';
<p>export default defineConfig({
plugins: [
react(),
linaria({
// 必须开启，否则样式只保留在 JS 中（仍含运行时）
outputCss: true,
// 可选：指定输出 CSS 文件名前缀
cssPath: 'assets/linaria.css',
}),
],
});
- 若未设
outputCss: true，Linaria 会退化为普通运行时库，失去零开销优势 - 生成的
linaria.css需手动检查是否被正确引入——Vite 不会自动<link rel="stylesheet"> - 搭配
build.rollupOptions.output.manualChunks可进一步拆分 CSS，避免单文件过大
动态样式怎么处理：用 CSS 变量 + 静态 fallback
Linaria 不允许运行时插值，但真实项目总要响应 props。解决方案不是放弃 Linaria，而是把动态部分“推到 CSS 层”：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const Button = styled.button`
background-color: #007bff;
color: var(--button-color, white); /* fallback 白色 */
transition: background-color 0.2s;
<p>&[data-primary='true'] {
background-color: #0056b3;
}
`;</p><p>// React 中传入 data 属性而非样式对象
<Button data-primary={isPrimary} style={{ '--button-color': textColor }} />
-
data-*属性和 CSS 变量都是原生支持的，无运行时成本 - 避免在
style中传复杂对象——只传单个变量，防止内联样式覆盖 Linaria 生成的规则 - 媒体查询、伪类（
:hover）、动画关键帧全部支持，只要不依赖 JS 计算
对比 styled-components 启用 SSR 提取后的残余开销
即使你给 styled-components 配了 babel-plugin-styled-components 和服务端提取，仍有不可消除的运行时成本：
立即学习“前端免费学习笔记（深入）”；
- 每个组件首次渲染仍要调用
createStyled，触发类名哈希计算 - 客户端水合（hydration）时需比对服务端生成的类名，失败则重排样式
- 主题 Provider 更新时，所有子组件会重新计算样式（哪怕样式没变）
- 而 Linaria 编译后只有
className字符串，和class="btn primary"一样轻量
真正难的是设计边界：哪些样式必须动态？能否用属性+变量替代？一旦接受这个约束，运行时性能就不再是问题——它根本不存在了。
