从样式 sheet 中仅提取 html 中使用的样式

Question

我正在尝试通过克服渲染阻塞来提高我网站的性能 css。只有一个文件似乎有问题，那就是我从 CDN 获得的缩小 bootstrap 样式表。我尝试了多种不同的方法，但没有任何效果。我想在我的项目中有一个 Bootstrap CDN 样式表的副本，并对其进行编辑，使其只有我目前在我的网站上使用的 css。有没有办法序列化您的站点，并从样式表中删除未使用的任何样式？我已经阅读了关于它的几种不同的看法，但是除了 Chrome 之外，大多数都不能在浏览器中工作，并且在样式表中点击媒体查询时会中断。

Answer 1

github 和 npm 上有多个重要的 css 工具。最大的一个可能是 https://github.com/addyosmani/critical - 你可以定义一个 grunt 构建任务来做你想做的事情：打开一个 html 页面并找出使用了哪些样式，然后基于它创建一个样式表。

是的，这些工具中的大多数在高级 css 方面确实存在一些问题，但是这个工具似乎支持媒体查询。 github 回购上讨论了许多问题，但它们似乎是针对非常具体的事情，因此可以将其视为一个好兆头 - 它很受欢迎并得到维护。