javascript - 检测链接和未使用的文件以及未使用的 JavaScript

Question

我刚刚完成了我在 2 年前开始的网站。我一直在尝试新事物，有时包括添加不同的框架或其他外部 JS 文件。

现在我不知道 JS 的哪些链接文件/行没有使用。是否有可以检测这些文件和代码行的工具？这会节省我很多时间。

Answer 1

这个答案提供了谷歌的闭包编译器，它在缩小和连接你的 JavaScript 代码的过程中，可以删除“死代码”。

引用编译级别的文档：

使用 ADVANCED_OPTIMIZATIONS 进行编译会删除可证明无法访问的代码。这在与大型库结合使用时特别有用。如果您只使用大型库文件中的几个函数，编译器可以从其输出中删除除这些函数之外的所有内容。

另请参阅此答案，其中包含有关 Google 闭包编译器的更多信息。

Answer 2

我有这个需求，所以我创建了一个工具，可以在浏览器端检测未使用的 JS，而不仅仅是从源代码中检测，因此它还可以测试第三方脚本。

它通过在您的计算机上创建一个本地代理来拦截 JavaScript 请求并即时检测这些文件。该工具能够检测出已检测文件的哪些部分已被页面使用，哪些没有。

我把它开源了，你可以在这里找到它：https ://github.com/gmetais/unusedjs 。

Answer 3

对于这个答案，我不确定它是否有帮助。试试声纳怎么样。Sonar 有一个 javascript 插件，可以检查您的 js 代码质量并列出未使用的代码。

Answer 4

在过去的几周里，我自己一直在研究类似的任务，最终得到了以下powershell查询：

PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse 
| select-string -pattern "src=""([^""]*.js)""" 
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique

首先它递归地选择我们项目目录中的所有 .aspx 和 .ascx 文件，然后找到src引用 .js 文件的属性值（可能是脚本元素的那些）并跟踪不同的值 - 瞧，你有一个引用的 .js 文件列表在你的项目中！

调整查询以使其适合您的特定项目及其结构是相当简单的。确保不要遍历可能包含过时引用的过时文件。考虑标记差异 - 您过去是否可以对属性值使用单引号，或者在“等于”符号周围留下不必要的空格，或两者兼而有之？您可以从另一个 js 文件中以编程方式或异步方式包含这些文件吗？等等等等

Answer 5

虽然这是一个很老的问题，但这可能有助于解决这类问题 - https://github.com/skpaul/LocateMe

我写这个是为了在我的项目中使用。

Answer 6

在 Google Chrome 开发者工具中，您现在可以在 Sources 选项卡上查看“Coverage”，以按每个文件的百分比，甚至逐行显示未使用的 Javascript 和 CSS。

这是2017 年该功能的公告。