是否值得删除未使用的CSS？

Question

我正在与另外2位大学开发人员一起开发一个简单的Web应用程序。我们正在使用几个库和包。我现在正在尝试准备好我们的应用程序以进行部署，但是注意到它的运行速度很慢。有很多未使用的CSS规则。

我尝试手动浏览编译的样式，搜索引用并删除。但这真的很乏味。

我的问题是：

• 是否值得删除未使用的CSS规则，或者结果可以忽略不计？
• 如何做到最好？

Answer 1

是否值得删除未使用的CSS规则？

我会说是的。在生产版本中包含任何未使用的代码不是很酷。

但是，除非出了点大错，否则CSS导致页面加载缓慢的原因非常不切实际，实际上，加载几页未使用的CSS规则的影响几乎可以忽略。图像/媒体，或者脚本更像是礼节。

您可能应该调查导致网页变慢的问题。查看开发人员工具的网络标签，开始调试为什么页面加载缓慢的原因，Google Page Load Insights可能也有帮助。看看this blog series，它也可以加快您的Web应用的速度。

如果您尚未这样做，则应该缩小并捆绑CSS和JS以进行生产。

---

如何查找和删除未使用的CSS规则

删除未使用的CSS是一项常见的任务，并且有很多软件包和工具可以使它陷入困境。有几种选择，可以继续：

1。手动删除未使用的CSS。

如果您的应用仍然很小，这可能是最简单的方法。

  

  
1. 打开Chrome DevTools
  
2. 使用以下命令打开命令菜单：cmd + shift + p
  
3. 键入“覆盖率”，然后单击“显示覆盖率”选项
  
4. 从Coverage标签中选择一个CSS文件，这将在Sources标签中打开该文件
  

来源：Google Developer, Chrome 59

2。使用在线工具

有一些工具，您可以在其中提供指向您站点的链接，它会搜索并找到未使用的CSS。这里的缺点是，这在本地不起作用。

• UnusedCSS可能是最好的工具，但是只有它 允许您免费做一个网站。
• UnCSS完全免费，但还不全面。
• PureifyCSS也不错，而且免费。

3。自动删除CSS

uncss允许您在构建时或编译时自动清除未使用的CSS。它也可以与Grunt和Babel一起使用。

---

一个警告词，当您稍后实际使用CSS时（例如请求完成加载时），某些CSS可能被检测为未使用。确保不要删除间接使用的类。

修改：

  

在使用CSS覆盖率时要小心，因为它考虑了媒体   查询，悬停效果和其他无效，因为它们未应用   加载页面时

另请参阅：https://css-tricks.com/unused/

Answer 2

• 显然，更多的CSS会加载您的应用程序缓慢。使用相同的CSS使您的应用更快 您可以在线上缩小CSS并使它成为一行CSS。它将减少您的CSS文件 大小。
• 您也可以使用JS

• 此外，减小图像大小并每次从缓存中加载图像

  要缩小CSS或JS，请转到https://www.minifier.org/