找出js文件已加载但未使用的文件

Question

有没有办法知道在html中加载了哪些js文件，但没有使用？让我们说我加载了一个HTML页面jQuery，jQuery Tabs，jQuery DatePicker库，但是在那个页面上我除了jQuery之外我没有使用它们。有没有办法找出使用（执行）的js文件？

Answer 1

简短回答 - 否。

答案很长：

由于文件在页面本身中被引用，因此所有脚本都将被加载，执行，并且它的代码（全局变量和函数 - 例如$）被暴露。

检查脚本的某个部分是否被执行的唯一方法是观察演员或者其他词语 - 调用代码和被调用的代码。

例如：

function callingFunction() {
  console.log('I will call this code!');
  calledFunction();
}

function calledFunction() {
  /// <summary>
  /// Lets say this function is added in a external file
  /// </summary>

  console.log('My code was called!');
}

onDemand scriptloading

一个好的方法是只在需要时加载你的库。 jQuery＆＃39; s $.getScript在这里做得很好。如果您像这样引用库，则可以通过网络面板检查当前加载的库。

更新

Chrome 59现在支持代码覆盖，它可以执行类似操作。 看看这个 https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 2

不，不是真的。当您包含所有文件时，将加载该文件中的所有JavaScript代码。如果要在使用其中的函数时加载js文件，可以检查插件是否可用。如果它不可用，则包含该文件。

E.g：

if(jQuery().datepicker) {
     //Include datepicker here
}

Answer 3

当您在页面中包含任何js时，没有理由它被加载， 虽然您可以使用Chrome事件侦听器选项卡检查在与事物交互时运行的内容。

这是你最接近的

Answer 4

我不认为有一种简单的方法可以做你想做的事。如果目的是进行延迟加载，请使用像require

这样的库