哪些javascript文件未在页面加载时使用

Question

是否有可能找出哪些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中的functions.js 。 我如何知道something.js未被使用，因此可以安全地从标题中删除？

我已经尝试过像FireBug，chrome的控制台，yslow和服务器日志这样的东西，但这些都告诉我哪些脚本已经加载，即所有脚本，而不是哪些脚本已被使用。

Answer 1

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

调用函数有很多种方法，例如在元素的click事件中， eval()语句......你可以在脚本文件中扩展现有类的原型......等等。你也可以通过AJAX获取新标记而不是从某个包含引用函数，这是不可能在不获取内容的情况下自动测试的。

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

Answer 2

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

Answer 3

只花了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/ 。

Answer 4

从不同的方向来看，您可以考虑使用（懒惰）加载JavaScript库。 我不能说这对你的情况有多合适，但我在上周看到过这两个，但没有使用其中任何一个：

• http://plugins.jquery.com/project/lazy （仅用于延迟加载jQuery插件？）
• http://labjs.com/ （不确定这是否会延迟加载？）