有没有一种有效的方法来查找哪些 JavaScript 包含未使用？答案

【问题标题】：Is there an effective way to find which JavaScript includes are not used?有没有一种有效的方法来查找哪些 JavaScript 包含未使用？
【发布时间】：2017-09-22 08:42:25
【问题描述】：

我继承了一个极其复杂的页面，其中包含大量<script src=...。

我怀疑很多包含都没有使用。有没有办法找出哪些没有被使用？

【问题讨论】：

应该为此发明一个插件！哇！那肯定会很高兴！
肮脏的解决方案：一个一个删除它们并注意错误。
All 使用脚本标签，因为它们都加载了。无论它们是否必要，几乎不可能以编程方式计算出来，因为它们可以用于不同页面中的不同事物、稍后发生的事件等。
不幸的是，我认为找出答案的唯一方法是逐个注释它们并运行页面以查看是否有任何内容不再起作用或导致语法错误，但正如上面的评论所指出的那样，有东西要检测会很酷，但毫无疑问是没有意义的，因为浏览器必须在检查它的使用之前加载插件/脚本，并且在没有服务器端的情况下无法修改该页面。动态修改是没有意义的，因为它仍然会在删除它们之前继续加载它们。
Detect linked & unused files and unused JavaScript的可能重复

标签： javascript

【解决方案1】：

Chrome 59 包含一个new Coverage tool，可以从 DevTools 中的三点菜单启用。

您应该能够启用该工具、浏览网站并执行脚本操作，然后查看实际调用了哪些行。未调用的文件将完全显示为红色（没有行运行）。

编辑：正如 cmets 中所述，这仍然不是一个最佳解决方案，因为它只会检测实际运行的行。正如@adeneo 提到的，几乎不可能静态地确定代码的哪些部分将运行，这仅仅是因为 JS 的复杂性。

如果XY Problem 实际上是为了减少初始 HTTP 请求的数量，最好简单地连接所有必需的文件并缩小它 (HTTP/1.1)，或者调查 grouping related assets and serving via HTTP/2.

【讨论】：

这是否意味着您已经尝试了页面上的每一个功能，甚至预测了以后可能使用或不使用哪些事件？
这听起来真的很有用，但是对于通过click / change 运行的功能，这些功能是否只会在客户端触发该功能后根据需要/使用显示？如果是这样，那就意味着必须运行所有函数来获取使用/需要的脚本列表......
是的，很遗憾。然而，鉴于 JS 的极端动态特性，无法静态确定这些代码路径是否会运行。不过，它仍然比系统地逐个删除文件更优雅。
@Scott 是的，我也这么想。所以真的你可以一一注释掉脚本标签，看看是否发生语法错误，这会给出与覆盖工具相同的东西......覆盖工具的优点是不必一直注释掉并重新加载但需要确保执行所有功能。 +1 一个很好的建议。我一定会亲自检查一下。
@NewToJS 是的，虽然测试过程相同。例如，如果仅在 click 事件中调用函数，则必须触发该事件才能让 Coverage 工具将其拾取或发生错误。