GitHub 实战：从 CSS-in-JS 迁移到 CSS Modules 以提升性能

GitHub 的 Primer 设计系统支撑着平台内从按钮到面包屑导航的众多组件。然而，随着 2023 年页面组件数量的爆发式增长，原有的 CSS-in-JS 方案逐渐显露出性能瓶颈，迫使团队必须寻找更优解。

背景：组件激增带来的性能挑战

随着 GitHub 页面上组件数量的激增，团队面临着三个主要问题：

1. 客户端加载变慢：样式需要在客户端初始化，导致首屏加载耗时增加。
2. 服务端渲染（SSR）性能下降：样式收集逻辑从客户端转移后，SSR 处理变得低效。
3. 样式更新失控：全局样式冲突增多，维护成本急剧上升。

核心方案：拥抱 CSS Modules

为了彻底解决上述问题，Primer 团队决定抛弃运行时开销较大的 CSS-in-JS，转而使用 CSS Modules。这一选择带来了显著优势：

• 零运行时开销：不再需要在客户端或服务器端进行复杂的样式计算和注入。
• 原生 CSS 支持：开发者可以直接使用原生 CSS 特性，同时享受模块化的封装性。
• 静态文件输出：样式被编译成独立的 CSS 文件，直接随 HTML 一起发送，大幅降低了网络传输和解析压力。

实战策略：渐进式迁移指南

面对 GitHub 这样庞大的代码库，全量替换风险极高。Primer 团队制定了一套渐进式迁移策略，确保在升级过程中不破坏现有功能。以下是核心步骤，对开发者极具参考价值：

1. 创建新文件并翻译样式：为每个组件添加一个新的 CSS Modules 文件，将原有的样式逻辑迁移过去。
2. 引入功能开关：利用 Feature Flag 机制，让组件在旧版（CSS-in-JS）和新版（CSS Modules）之间切换，默认保留旧版以保证稳定。
3. 视觉回归测试：运行现有的视觉回归测试套件，确保新旧版本在渲染效果上完全一致。
4. 灰度发布：先对内部团队开放，再逐步扩展到 GitHub 员工，最后向所有用户开放。这一过程能快速捕获潜在的渲染问题。

迁移成果与数据

得益于上述策略，Primer 团队于 2024 年 12 月完成了所有组件的迁移。性能测试数据表明，这次重构带来了立竿见影的效果：

• 服务端渲染速度提升 55%：页面生成速度大幅加快，用户体验更流畅。
• 组件初始化速度提升 25%：客户端样式加载和初始化更加迅速，减少了阻塞。

启示与展望

Primer 的成功迁移证明了，即使是复杂的工程化改造，只要策略得当，也能在不影响业务的前提下实现性能飞跃。GitHub 已开始计划将这一经验推广到公司内部的其他项目，并最终探索全面移除 CSS-in-JS 支持的可能性。

对于其他大型设计系统或前端项目而言，CSS Modules 依然是处理性能优化的一个高效、稳健的选择。