在飞行中删除未使用的CSS?

时间:2010-02-19 09:01:56

标签: css

当我的许多网页加载[使用GooglePageSpeed]并且似乎加载了大量未使用的CSS时出现问题。

如果我尝试拆分CSS - 那么我得到“太多CSS文件”的错误。我想知道是否有任何jquery插件[或其他]能够只为正在加载的页面的RENDER而忽略其余的?

它有点像一个动态的CSS交换器?真有帮助......

5 个答案:

答案 0 :(得分:4)

除非你发送数百kb的css然后它才真正重要。

动态CSS更换器会破坏浏览器的缓存能力,从而导致更高的传输速度。

答案 1 :(得分:4)

我建议你去 Dust-Me Selectors (火狐的插件)检查未使用的css并删除特定页面。请注意,这不是允许您即时删除的内容。

alt text

答案 2 :(得分:2)

Grunt有一个非常方便的插件叫做UnCSS。它会自动删除未使用的CSS。查看此链接以获取更多信息:

Remove Unused CSS automatically

答案 3 :(得分:1)

Scaffold可能有所帮助。它不会删除您不需要的内容,但会将其编译为一个小文件。

删除未使用的CSS需要一些JavaScript,这将比上述解决方案更慢。

答案 4 :(得分:1)

在我看来,在运行中优化你的css是不好的做法。既不在服务器端,也不在客户端,因为它会降低服务器/用户浏览器的性能。

如果CSS大小对您来说非常重要,那么为Web应用程序中使用的每种全局类型的页面手动创建一些预优化的样式表并在它们之间切换是更好的方法。 对于这种需求,Firefox的Firebug还有一个有用的插件,名为CSS Coverage。它允许您扫描网站的多个页面,以查看每个页面或每个页面中您的网站实际使用的CSS规则。