10

是否可以找出哪些 javascript 文件未在网页上使用，而无需添加控制台日志或调试或删除它们以查看是否出现问题？

我正在寻找工具、命令行脚本或 firefox 插件等。

例如，假设我将这些包含在标题中：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/something.js"></script>

在页面上，仅对 和 中的函数functions.js进行validation.js调用jquery.js。我怎么知道它something.js没有被使用，因此可以安全地从标题中删除？

我已经尝试过通过诸如 FireBug、chrome 的控制台、yslow 和服务器日志之类的东西来生根，但这些都告诉我哪些脚本已被加载，即所有脚本，而不是哪些脚本已被使用。

4

4 回答 4

4

AFAIK 没有简单的“此文件正在使用/未使用”检测机制，因为 JavaScript 中有很多方法可以调用、扩展和引用事物。

调用函数的方法有很多种，例如在click元素事件中，eval()语句...您可以在脚本文件中扩展现有类的原型...等等。此外，您可以通过AJAX 而不是反过来引用某个包含的函数，如果不获取内容就无法自动测试。

除非有人想出一个工具来解决这个问题（我并不是说这是不可能的，只是它非常困难）我会说用一个好的 IDE 和搜索功能手动解决这个问题是最好的方法.

于 2010-06-23T08:34:18.303 回答
1

只花了 7 年 :) 还想指出，您可以使用 Navalia 自动执行此操作：https ://github.com/joelgriffith/navalia 。

这是一个简单的例子：

import { Chrome } from 'navalia';
const chrome = new Chrome();

async function checkCoverage() {
  await chrome.goto('http://joelgriffith.net/', { coverage: true });
  const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js');
  console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 }
  chrome.done();
}

checkCoverage();

更多在这里https://joelgriffith.github.io/navalia/Chrome/coverage/。

于 2017-07-09T02:56:06.650 回答
1

为了回答我 7 年后提出的问题，Chrome 开发工具现在正好有这个功能！https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

于 2017-07-02T17:07:06.297 回答
0

从不同的方向来看，您可以考虑使用（延迟）加载 javascript 库。我不能说这在你的情况下有多合适，但我在上周看到提到这两个，但没有使用它们中的任何一个：

于 2010-06-23T08:42:29.347 回答