通过交付更多 CSS 来改善站点性能
2026-09-25
我们如何将 github.com 完全从 CSS-in-JS 迁移出去。
《通过交付更多 CSS 来提升站点性能》这篇文章首先出现在 The GitHub Blog 上。
GitHub 博客分享将 github.com 完全从 CSS-in-JS 迁出，转向交付更多 CSS，以改善站点性能。
- GitHub 博客分享将 github.com 完全从 CSS-in-JS 迁出，转向交付更多 CSS，以改善站点性能。
- 原贴提到：How we fully migrated github.com away from CSS-in-JS. The post Improving
- 来源：github.blog
GitHub 博客公开了一个信号：github.com 已完全从 CSS-in-JS 迁出，文章标题强调通过交付更多 CSS 来改善站点性能。这不是单点样式替换，而是大型前端对样式交付方式的重新选择。
为什么值得关注
在大规模 Web 应用中，CSS-in-JS 往往把样式写进 JavaScript：组件运行时生成或注入样式，SSR 还要处理样式收集与序列化。这能带来组件级封装和动态能力，但也可能增加 JS 体积、运行时开销与缓存复杂度。转向更多静态 CSS，通常意味着样式可被浏览器独立缓存、并行加载，并减少对 JS 执行后才能完成首屏样式的依赖。
对谁有价值
前端架构师、性能工程师、设计系统维护者，以及使用组件化前端框架并已引入 CSS-in-JS 的大型产品团队，都能从这个信号中获得参考。尤其是访问量大、缓存收益高、首屏指标敏感的业务，样式交付方式会直接影响体验与基础设施成本。
可以怎么行动
- 先量化现状：统计样式相关 JS 体积、运行时耗时、SSR 输出、缓存命中与核心 Web 指标。
- 评估替代路径：CSS Modules、原子化 CSS、静态提取或混合方案，并保留设计 token 与主题能力。
- 设计增量迁移：从低风险页面或组件开始，建立边界层、codemod 与回归监控，避免一次性重写。
- 建立 CSS 交付规范：提取、压缩、缓存、关键 CSS 与按路由拆分，明确哪些样式不该进 JS。
- 把设计系统与具体样式实现解耦，降低对单一 CSS-in-JS 方案的锁定。
风险与限制
迁移并非零成本。动态主题、运行时变量、第三方组件样式覆盖、选择器冲突、优先级、死代码和缓存失效都需要治理。公开信号只说明 GitHub 做了迁移并强调性能意图，并未披露完整迁移细节与性能数字；因此不应把单一案例当成普适答案，而应回到自身指标与团队约束做验证。
这条内容的真正价值，不只是“有人发布了一个新功能”，而是它揭示了 github.blog 背后的产品方向、工作流变化或竞争信号。对 OPC 来说，这种信息可以转化成持续追踪的栏目选题。
如果把《通过交付更多 CSS 来改善站点性能》放到你的内容系统里，它最大的价值在于帮助读者更快看懂“为什么值得关注”，而不是只看到一条碎片化动态。