如何确定是否实际使用了某些 javascript 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16854458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find out if certain javascript code is actually used?
提问by Ashkan Aryan
I am doing some JavaScript cleanup work on a legacy project, and trying to get rid of redundant JS libraries. I have done all the obvious ones (those that are not references from anywhere at all). But there are a number of JS files that are included in all pages (via tiles).
我正在对一个遗留项目做一些 JavaScript 清理工作，并试图摆脱多余的 JS 库。我已经完成了所有明显的（那些根本不是来自任何地方的参考）。但是有许多 JS 文件包含在所有页面中（通过图块）。
How can I find out whether they are actually used, short of going through content of each and search for each function in them? Is there a smarter/easier way to do this? It's a java based / Spring project if that helps by the way.
我如何知道它们是否被实际使用，而不是通过每个内容并搜索其中的每个功能？有没有更聪明/更简单的方法来做到这一点？如果有帮助的话，它是一个基于 Java 的/Spring 项目。
采纳答案by Carlos ABS
I think there's no easy way.
我认为没有简单的方法。
You can remove the script reference, run your site with the browser debugger turned on, and see if there's any "function not found" error.
您可以删除脚本引用，在打开浏览器调试器的情况下运行您的站点，然后查看是否有任何“未找到函数”错误。
But you'll have to test every single functionality in your site...
但是您必须测试站点中的每一个功能......
EDIT:
编辑：
The answer from user li x seems to be the best at this moment.
来自用户 li x 的回答此时似乎是最好的。
回答by li x
One of the latest updates from the chrome dev tools now includes a JS and CSS coverage tab that allows you to see your unused code.
chrome 开发工具的最新更新之一现在包括一个 JS 和 CSS 覆盖率选项卡，可让您查看未使用的代码。
https://developers.google.com/web/updates/2017/04/devtools-release-notes
https://developers.google.com/web/updates/2017/04/devtools-release-notes
1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.
回答by Alberto Zaccagni
I would suggest using spies for this task. They are used in TDD to test if functions are called, so that one could assert if calls are actually happening.
我建议使用间谍来完成这项任务。它们在 TDD 中用于测试函数是否被调用，以便可以断言调用是否实际发生。
If you are lucky enough those js libraries are initialized in a constructor or in some other way, if so I would suggest you to spy on these init functions.
If not you might want to spy on all functions, but this is painful especially if you have big libraries, in that case I would suggest to go one by one.
如果您足够幸运，这些 js 库是在构造函数中或以其他方式初始化的，如果是这样，我建议您监视这些 init 函数。
如果不是，您可能想监视所有函数，但这会很痛苦，尤其是如果您有大型库，在这种情况下，我建议一项一项进行。
In the past I've used Jasmineor Sinon.JSfor this task, follows an example:
过去我使用Jasmine或Sinon.JS来完成这个任务，下面是一个例子：
it('should be able to login', function () {
spyOn(authobj, 'isEmpty');
authobj.login('abc', 'abc');
expect(authobj.isEmpty).toHaveBeenCalled();
});
Once you have spies setup on the proper functions then it should be just a matter of checking if they are called or not, you could make a call to mixpanel (first example that comes to mind) with some info about it, so that later on you can see what functions are called and what are not.
一旦你在适当的函数上设置了间谍，那么它应该只是检查它们是否被调用的问题，你可以调用 mixpanel（想到的第一个例子）并提供一些关于它的信息，以便稍后你可以看到哪些函数被调用，哪些函数不被调用。
回答by 5377037
You can also give a try to purifycss.
你也可以试试purifycss。
$ 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]
