如何确定某些javascript代码是否实际使用？

Question

我正在遗留项目上做一些JavaScript清理工作，并试图摆脱冗余的JS库。我做了所有明显的（那些根本不是任何参考）。但是所有页面都包含了许多JS文件（通过磁贴）。

我怎样才能知道它们是否实际使用，没有浏览每个内容并搜索其中的每个功能？有更智能/更简单的方法吗？这是一个基于java的/ Spring项目，如果顺便说一下有帮助的话。

Answer 1

我认为没有简单的方法。

您可以删除脚本引用，在打开浏览器调试器的情况下运行您的站点，并查看是否存在任何“找不到功能”错误。

但是你必须测试你网站中的每一个功能......

Answer 2

chrome dev工具的最新更新之一现在包含一个JS和CSS coverage选项卡，允许您查看未使用的代码。

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.

Answer 3

我建议使用间谍来完成这项任务。它们在TDD中用于测试函数是否被调用，以便可以断言调用是否实际发生。

如果你很幸运，那些js库是在构造函数中初始化的，或者以其他方式初始化，如果是这样，我建议你监视这些init函数。 如果不是，你可能想要监视所有功能，但这很痛苦，特别是如果你有大型库，在这种情况下我会建议逐个去。

在过去，我使用Jasmine或Sinon.JS来完成这项任务，举个例子：

it('should be able to login', function () {
  spyOn(authobj, 'isEmpty');  
  authobj.login('abc', 'abc');  
  expect(authobj.isEmpty).toHaveBeenCalled();
});

一旦你有间谍设置正确的功能，那么它应该只是检查它们是否被调用，你可以调用mixpanel（想到的第一个例子）及其中的一些信息，以便稍后你可以看到哪些函数被调用，哪些函数没有。

Answer 4

你也可以试试purifycss。

CLI usage：

$ npm install -g purify-css

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                         [boolean] [default: false]
  -o, --out        Filepath to write purified css to                    [string]
  -i, --info       Logs info on how much css was removed
                                                      [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed
                                                      [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]