优化 - 有没有办法找到和删除所有 html 页面通用的未使用的 CSS 和 Javascript？ [关闭]答案

【问题标题】：Is there any way to find and remove unused CSS and Javascript common to all html pages? [closed]优化 - 有没有办法找到和删除所有 html 页面通用的未使用的 CSS 和 Javascript？ [关闭]
【发布时间】：2015-04-14 08:25:03
【问题描述】：

我的网站有很多网页，我正在尝试清理我的样式表和脚本。我网站中的任何 html 页面都没有使用大约 10% 或更多的每个 js/css。我需要的是删除常见的未使用和冗余的 css 和 js。我做了一些研究，发现this。但它不是免费的。
注意：

一些 js/css 被多个 html 页面调用，但每个 js/css 的一部分仍然没有被调用它们的任何 html 页面使用。
我的网站只兼容 Chrome。

【问题讨论】：

好吧，您的第二个链接，在页面底部显示“探索所有页面并下载干净的 css” - 但不幸的是，您必须为此付费
完全正确。检查我的新编辑。
davidwalsh.name/uncss - 也许这个对 css 有帮助？
uncss 将创建一个文件，其中包含每个页面所需的所有 css 内容。但我想保留当前的 css 文件并从其中删除未使用的 css。
我自己写了一个不用的 CSS-finder 工具，然后公开了，看看jitbit.com/unusedcss

标签： javascript html css optimization code-cleanup

【解决方案1】：

是的，您应该使用 Addy Osmani 的 grunt-uncss plugin 来清理未使用的 CSS。我不太确定您是否可以使用工具来删除未使用的 JS，因为它取决于应用程序逻辑，将调用 JS 代码的哪一部分。

【讨论】：

对于 JavaScript，其他地方有人建议使用 JSLint。这不会使过程自动化，但会警告未使用的变量、函数等。

【解决方案2】：

首先，有完整的解决方案，其中一些可能已经在 SO 上引用，但我对其中的任何一个都不熟悉，而且很多可能要花钱。如果我是你，我会开始搜索关键字“清理 css lint”和“清理 javascript lint”或类似的东西。我不会为此目的编写自己的代码。

现在，如果我不是你，或者经过几个小时的搜索，我仍然没有找到任何满足我需求的东西，我可能会决定自己尝试一下。如果你愿意弄脏，至少对于 CSS，你可以做的是在本地运行一个脚本来运行每个提供的 HTML 文件和

从每个样式表中提取所有引用的样式表，制作一个列表
从每个类中提取所有 CSS 类的名称和 id，形成一个列表
将列表与 HTML 中实际使用的类和 ID 进行匹配
列出所有不存在的内容，并将其存储在文件中以便于访问

如果你熟悉它，你可以在几个小时内用 Python 把类似的东西放在一起。当然，这取决于您使用什么语言来编写快速而肮脏的脚本。

由于逻辑问题，分析 javascript 文件会有点困难。您可以做类似的事情，但基本上编写自己的 javascript 解释器以清除一些未使用的函数可能不符合您的最佳利益。是的，你用代码来做，但你会重新发明轮子。研究内置此功能的 IDE 可能实际上是一个不错的主意。有些是免费的，最重要的是，您不必自己编写它们。

【讨论】：

【解决方案3】：

打开chrome DevTools，在Audits下可以审核当前状态或重新加载页面和Audit on Load

然后在 网页性能 下有一个部分显示：“删除未使用的 CSS 规则

现在，当我使用它时，我看到它列出了我正在使用的一些 css当前未应用类。

顺便说一句，如果据我所知它没有显示它在 chrome canary 中工作。另外我不记得我是否为此启用了标志。（我不这么认为）

【讨论】：

【解决方案4】：

Helium CSS 是一个 javascript 工具，用于发现网站上许多页面中未使用的 CSS。您首先必须将 javascript 文件安装到要测试的页面。然后，你必须调用一个氦函数来开始清洗。

CSSESS 是一个小书签，可帮助您在任何站点上查找未使用的 CSS 选择器。这个工具很容易使用，但它不会让你配置和下载干净的 CSS 文件。它只会列出未使用的 CSS 文件。

【讨论】：

【解决方案5】：

您很了解您的代码，但这应该可以帮助您完成所有工作，只需阅读它即可。 Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

【讨论】：

【解决方案6】：

您可以在http://gtmetrix.com/remove-unused-css.html 使用 GTmetrix 清理 CSS 代码。给出 URL，然后按 GO！

http://www.peterbe.com/plog/mincss 是一个工具，当给定一个 URL（或多个 URL）时，它会下载该页面及其所有 CSS，并比较 CSS 中的每个选择器并找出哪些未使用。结果是原始 CSS 的副本，但删除了文档中未找到的选择器。

您也可以使用谷歌浏览器审核工具参考本网站http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

或者你可以使用谷歌浏览器扩展

【讨论】：

我看不到 gtmetrix 在哪里可以选择下载干净的 css 文件。它只是显示一个报告。

【解决方案7】：

您可以使用下面提到的链接并清理您的 html 代码和 css。

http://validator.w3.org/#validate_by_uri+with_options

【讨论】：

请不要只添加网址。