26

我正在对遗留项目进行一些 JavaScript 清理工作，并试图摆脱多余的 JS 库。我已经完成了所有显而易见的事情（那些根本不是来自任何地方的参考）。但是所有页面中都包含许多 JS 文件（通过图块）。

我怎样才能知道它们是否被实际使用，而不是遍历每个内容并搜索其中的每个功能？有没有更聪明/更简单的方法来做到这一点？顺便说一句，这是一个基于 java / Spring 的项目。

4

4 回答 4

27

chrome 开发工具的最新更新之一现在包括一个 JS 和 CSS 覆盖选项卡，可让您查看未使用的代码。

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

1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.
于 2018-01-16T09:09:15.327 回答
4

我建议使用间谍来完成这项任务。它们在 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（想到的第一个例子）并提供一些关于它的信息，以便稍后你可以看到哪些函数被调用，哪些未被调用。

于 2013-05-31T10:07:29.927 回答
3

我认为没有简单的方法。

您可以删除脚本引用，在打开浏览器调试器的情况下运行您的站点，然后查看是否有任何“未找到函数”错误。

但是您必须测试站点中的每一个功能......

编辑：

用户 li x 的回答似乎是目前最好的。

于 2014-07-28T16:37:26.097 回答
0

您也可以尝试purifycss。

CLI 用法：

$ 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]
于 2018-01-17T10:11:52.450 回答