【问题标题】：Is it worth removing unused CSS?是否值得删除未使用的 CSS？
【发布时间】：2019-04-26 11:18:12
【问题描述】：

我正在与大学的其他 2 位开发人员一起开发一个简单的网络应用程序。我们正在使用几个库和包。我现在正试图让我们的应用程序准备好部署，但注意到它很慢。有很多未使用的 CSS 规则。

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

我的问题是：

【问题讨论】：

您能否提供更多详细信息，您的网站以及您正在使用的代码？
取决于您所说的价值。它不会对性能有太大帮助。但它当然会使代码更易于维护和可读。这是一项乏味的工作，一般来说，我只会对我正在修改的代码部分进行操作。
IMO 值得。 1.它会降低生成的CSS文件的大小（它永远不会伤害）。 2. 从长远来看，通过删除污染代码，您的代码将更易于阅读和维护。 3. 删除冗余并最小化您的选择器可能也会有所帮助。 4. 这就是为什么预处理器也适用的原因，在模块中管理你的 css 会有所帮助。 5. 更多信息，请阅读这篇很棒的article ;)。
是的。你可以去掉越多不需要的东西越好。但是，如果您使用的是 Twitter Bootstrap 之类的库，则可以使用其 CDN，如果用户已经从另一个站点下载了该版本的库，它可能会被缓存，因此甚至不需要请求。此外，您删除的任何内容都会增加项目的维护成本，如果您想要升级库，则必须再次进行所有操作。最后，性能问题通常是由大型媒体文件引起的，请先检查。
很遗憾，这么多通用库只能让应用程序变得臃肿。因此，对您的应用程序进行 treeshake 以删除任何未使用的代码和资产非常重要。缩小、捆绑和有效的缓存也将有所帮助。祝你好运

标签： css gulp

【解决方案1】：

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

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

但是，除非出现非常严重的问题，否则您的 CSS 极不可能是页面加载缓慢的原因，实际上加载几页未使用的 CSS 规则的影响几乎可以忽略不计。更可能是图像/媒体，或者可能是脚本。

您应该调查一下是什么让您的网页变慢了。查看开发工具的网络选项卡以开始调试页面加载缓慢的原因，Google Page Load Insights 也可能有所帮助。看看this blog series，关于加快您的网络应用程序的速度。

如果您还没有这样做，您可能还应该缩小和捆绑您的 CSS 和 JS 以用于生产。

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

删除未使用的 CSS 是一项常见的任务，并且有很多软件包和工具可以让它变得直截了当。有几种选择，继续前进：

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

打开 Chrome 开发工具

使用以下命令打开命令菜单：cmd + shift + p

输入“Coverage”并点击“Show Coverage”选项

从 Coverage 选项卡中选择一个 CSS 文件，这将在 Sources 选项卡中打开该文件

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

uncss 允许您在构建时或编译时自动删除未使用的 CSS。它也适用于 Grunt 和 Babel。

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

编辑：

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

【讨论】：

【解决方案2】：

显然，更多 css 会使您的应用加载缓慢。使用相同的 Css 使您的应用程序更快您可以在线缩小您的 css 并使其成为一行 css。它会减少你的css文件大小。
JS也可以这样做
另外，减小图像大小并每次从缓存中加载它

要缩小你的 css 或 JS 去https://www.minifier.org/

【讨论】：