javascript - 找出加载了但未使用的 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!');
}

按需脚本加载

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

更新

Chrome 59 现在支持做类似事情的代码覆盖率。一探究竟 https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage