在 Web 项目中查找未使用的 CSS 规则和 js 脚本？

Question

嗨.. 我的项目有许多我的项目中没有使用的 CSS 角色和 JavaScript 脚本。如何找到这些未使用的文件？

Answer 1

当我需要这样做时，我使用了开发环境的搜索功能来搜索解决方案中的所有文件，以查找我怀疑未使用的文件的文件名。如果没有找到它，或者只在文件本身中找到它，我知道它没有被使用，因为必须引用文件（通过 script 或 link 元素，或在结合并缩小它们）以供使用。

当然，如果您是从组成部分构建文件名，那是行不通的。例如，如果您的代码具有包含“foo”的变量basename，然后代码输出如下脚本标记：

<script src="<%=basename%>-bar.js"></script>

...那么我对“foo-bar.js”的搜索将找不到它。如果您的代码中确实有这种可能性，您必须找到所有 script 和 link 元素并自己检查它们...

...或实验：部署您的解决方案，并在服务器上，删除您认为可能不会使用的每个文件，在浏览器上刷新，并在控制台中查找 404。

---

...所有这些都与未使用的文件有关。如果您认为这些文件被引用，但它们的内容没有被使用，那么您要么需要选择性地删除引用并查看哪些中断（blech，一个手动且容易出错的过程），要么您'将需要一个代码覆盖率分析工具。 This question here on StackOverflow 讨论 JavaScript 的代码覆盖率分析工具，Spudley's answer 在这里指向 CSS 的“代码覆盖率”（没有更好的术语）工具。

Answer 2

有一个不错的小 Firefox 插件，名为 Dust Me Selectors，它会扫描页面以查找未使用的 CSS。

这是一个很好的工具，可以发现样式表中多余的东西。

但是，您仍然需要小心使用它，因为在运行程序时样式表很有可能未被使用，但对于您的站点仍然是必需的 - 即它可以用于动态内容或其他共享相同样式表代码的页面等。

[编辑]

我删除了我之前的编辑，我注意到这个项目可能已被放弃，因为实际上它看起来像是重新处于积极开发中。全面的好消息。