通过引入更多 CSS 提升网站性能
这件事讲了什么
GitHub 把网站样式的写法从“CSS-in-JS”换成了原生 CSS Modules。原来样式要在浏览器或服务器运行时现场生成，组件一多页面就变慢、更新也难控制。他们先把设计系统 Primer 的组件逐个换掉，用开关控制新旧样式切换、用截图对比确保外观不变，再逐步放量；2024 年 12 月全部换完，页面服务端渲染时间少了 55%，组件初始化时间少了 25%。此后 GitHub 还在继续清理旧写法，让网站更快。
可以使用的工具
文中可用工具
- CSS Modules一种把样式写在单独 CSS 文件里、类名默认局部生效的写法，不需要运行时生成样式
- Primer Design SystemGitHub 的基础界面组件库，提供按钮、横幅、面包屑等组件
- styled-componentsGitHub 原来使用的 CSS-in-JS 方案，在运行时动态生成样式
- @primer/react不依赖 styled-components 的新版 Primer React 组件库
- @primer/styled-react过渡用的包装组件库，让旧代码继续使用 sx 属性
讨论 0
登录后参与讨论，阅读资讯无需注册。
还没有评论，来分享第一个看法。