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

页面加载时未使用哪些javascript文件,javascript,pageload,Javascript,Pageload,在不必添加控制台日志或调试或删除它们以查看是否出现问题的情况下,是否可以找出哪些javascript文件未在网页上使用 我正在寻找一个工具,或命令行脚本或firefox插件等 例如,假设我在标题中包含以下内容: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/functions.js"></script&g

在不必添加控制台日志或调试或删除它们以查看是否出现问题的情况下,是否可以找出哪些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和服务器日志等来查找,但这些都告诉我哪些脚本已经加载,即所有脚本,而不是使用了哪些脚本。

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

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


除非有人能想出一个工具来解决这个问题(我不是说这是不可能的,只是说这太难了),否则我会说,用一个好的IDE和搜索功能手动解决这个问题是最好的方法。

从另一个方向来看,你可以考虑使用(惰性)加载javascript库。我不能说这在你的情况下有多合适,但我在上周看到有人提到这两个,但没有使用其中任何一个:

  • (仅用于延迟加载jQuery插件?)
  • (不确定这是否会导致延迟加载?)

在回答我自己7年后的问题时,Chrome开发工具现在正好具备了这一功能

只花了7年:)还想指出,你可以用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();

更多信息。

如果FireFox中的Firebug和Chrome中的开发者工具能够分辨出哪个CSS正在使用,哪个不是,那么为什么不使用JS呢。希望他们很快会添加此功能。@bjan对于JS来说,这并不像对于CSS那么简单。您必须捕获由JS文件引起的每个状态更改,例如变量定义等。这需要开发人员工具方面的大量工作。现在是否有此类工具/方法?如果页面中有任何在页面加载时隐藏的弹出窗口,并且用于该弹出窗口的css将被视为未使用的css。这个工具也不是精确和完美的,但不知何故确定了css所需的第一个页面加载