多发送 CSS，反而让站点更快
来源: github.blog — 2026-09-25
概述
GitHub 的 Primer 设计系统在 2023 年遇到组件数量爆炸带来的 CSS-in-JS 性能问题：样式要在客户端初始化导致首屏变慢，服务端渲染性能下降，样式更新的规模也失控。团队转向 CSS Modules，把样式写在组件旁边的 CSS 文件里、类名默认局部化，并完全去掉客户端与服务端运行时。经过两年的渐进迁移，到 2026 年 6 月 GitHub 已经 100% 运行在 CSS Modules 上，同时删掉了 sx、styled-components 与 styled-system。
核心要点
- CSS-in-JS 的三大痛点：样式在客户端初始化拖慢首屏、样式收集移到服务端后 SSR 变慢、页面组件变多时样式更新规模失控。
- CSS Modules 让团队能用原生 CSS 特性，同时保留 CSS-in-JS 带来的同地存放与作用域隔离，并且没有客户端或服务端运行时。
- 迁移策略是渐进的：为每个组件加翻译后的 CSS Modules 文件、用特性开关在新旧样式之间切换、靠视觉回归测试比对快照、再从团队到全公司逐级放量。
- 到 2024 年 12 月 Primer 组件全部迁完，收益明显：服务端渲染页面耗时减少 55%，页面组件初始化时间减少 25%。
- 更棘手的是 sx 属性，它是 GitHub 多年来的事实标准，好处是 TypeScript 支持好、与设计令牌集成，代价是内联对象带来的运行时开销与扩展困难。
- 为此团队先做了 @primer/styled-react 包装层让新旧写法共存，随后按包逐个迁移：2025 年 4 月高峰期有约 7760 个 sx 待迁移，8 名工程师用 6 个月迁完 6419 个，SSR 收益在 1% 到 22% 之间。
- 2026 年 4 月重启第二波迁移时，两名工程师借助 Copilot 编码代理在三周内把剩余的 895 个 sx 清到 0。
- 最后的拦路虎是主题：GitHub 的七套主题（各带高对比模式）都依赖 styled-components，团队又花两个月把主题逻辑与它的 JavaScript 工具解耦。
- 到 2026 年 6 月 GitHub 已 100% 使用 CSS Modules，整个过程被作者概括为「一次渐进式的样式与主题交付平台的重新奠基」，且全程没有把 GitHub 弄坏。
金句
起初看起来只是一次 CSS 迁移，最后却成了 GitHub 在规模上如何书写样式、主题与交付 UI 的一次渐进式重构。
👍 0
👎 0
← 返回 Lobsters 首页