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

Question

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

Answer 1

github和npm上有多个关键的css工具。最大的一个可能是https://github.com/addyosmani/critical - 你可以定义一个grunt构建任务来完成你想要的：打开一个html页面并找出使用的样式，然后根据它创建一个样式表。

是的，大多数这些工具确实存在一些高级CSS问题，但这个似乎支持mediaqueires。在github repo上讨论了许多问题，但它们似乎是针对非常具体的事情，所以人们可以将其视为一个好兆头 - 它很受欢迎并得到维护。