通过提供更多CSS来提高网站性能

看看设计系统如何在不破坏世界的情况下带来重大变化。文章通过提供更多CSS来提高网站性能首先出现在GitHub博客上。

Josh Black是德克萨斯州奥斯汀的一名软件工程师。他喜欢从事设计系统、创造无障碍体验和吃chilaquiles。Primer Design System为您今天在GitHub上看到的许多体验提供支持。从按钮、横幅到面包屑,这些基本组件必须在各种场景下都易于访问、灵活且高性能。

早在2023年,某些页面上的组件数量就开始爆炸式增长。

这导致了我们现有的CSS-in-JS解决方案面临一些与性能相关的挑战:由于样式集合从客户端更新转移到样式,样式集合在客户端服务器端渲染性能下降,因此初始页面加载需要更长的时间。随着页面上组件数量的增加,样式集合变得失控。很明显, Primer团队需要从源头上解决问题。

我们需要找到一种替代方案,以完全避免我们在当前解决方案中看到的客户端和服务器成本。最重要的是,我们选择的任何替代方案都需要避免在迁移过程中损坏GitHub。CSS (模块)简介入门团队找到了一个符合我们所有标准的解决方案: CSS模块。

这种格式将允许我们做我们最喜欢的事情之一:编写和使用本机CSS功能,同时仍然允许我们期望从CSS-in-JS中获得一些托管和封装。使用CSS模块,样式将与组件的JavaScript源一起在CSS文件中编写。