GitHub 如何通过迁移 CSS Modules 将 SSR 时间降低 55%

核心亮点

GitHub 工程师 Josh Black 复盘了把 Primer 设计系统从 CSS-in-JS 迁移到 CSS Modules 的全过程。截至 2024 年 12 月，Primer 全部组件迁移完成，服务端渲染（SSR）时间减少 55%，组件初始化时间减少 25%。说白了，一次"换样式写法"就把页面性能拉了一大截，而且是在不重写业务逻辑的前提下。

具体能力或事件经过

CSS-in-JS 在运行时才计算样式，会给 SSR 和客户端带来额外开销；CSS Modules 在构建期就生成静态样式文件，运行时不需再算。GitHub 这种超大体量站点，任何一点每请求的样式开销乘以海量流量，都会变成可观的延迟与算力浪费，所以这次迁移的杠杆被放得很大。

技术细节

迁移不是一刀切，而是组件逐个替换、双轨并行的工程：先把新组件用 CSS Modules 写，再逐步替换老组件，保证线上无感。最终 100% 完成后才彻底去掉 CSS-in-JS 依赖，避免回退风险。这种渐进式改造是大规模前端项目控制风险的标配做法。

与竞品对比

不少前端团队仍用 CSS-in-JS 图开发方便；GitHub 用实绩说明：当规模足够大，"开发体验"要让位于"运行效率"。对性能敏感的站点，这则案例是选型参考，也提醒人们"框架默认"未必等于"生产最优"。

行业影响或适用场景

对维护大型前端项目的团队，这是一份可复用的优化范本：用构建期静态化替代运行时计算，常能换来量级化的性能收益。前提是做好渐进迁移和回归测试，别为追求极致而中断业务。它证明：性能优化不必推倒重来，工程纪律比技术噱头更可靠。