找到死的 JavaScript 代码?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4136738/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 11:02:55  来源:igfitidea点击:

find dead JavaScript code?

javascriptrefactoringdead-code

提问by JoelFan

We are refactoring a legacy web app and as a result are "killing" quite a lot of JavaScript code but we're afraid of deleting what we think is dead code due to not being sure. Is there any tool / technique for positively identifying dead code in JavaScript?

我们正在重构一个遗留的网络应用程序,结果是“杀死”了相当多的 JavaScript 代码,但由于不确定,我们害怕删除我们认为是死代码的代码。是否有任何工具/技术可以积极识别 JavaScript 中的死代码?

回答by Júlio Santos

There's grep. Use it to find function calls. Suppose you have a method called dostuff(). Use grep -r "dostuff()" * --coloron your project's root directory. Unless you find anything other than the definition, you can safely erase it.

grep。使用它来查找函数调用。假设您有一个名为 的方法dostuff()。使用grep -r "dostuff()" * --color你的项目的根目录。除非您找到定义以外的任何内容,否则您可以安全地删除它。

ackis also a notable alternative to grep.

ack也是grep 的一个值得注意的替代品。

回答by haylem

Without looking for anything too complex:

无需寻找任何太复杂的东西:

回答by Sukhanov Niсkolay

WebStorm IDE from JetBrains can highlight deadcode and unused variables in your project.

JetBrains 的 WebStorm IDE 可以突出显示项目中的死代码和未使用的变量。

回答by Harmen

You could use code optimizers as Google Closure Compiler, however it's often used for minimizing code.

您可以将代码优化器用作Google Closure Compiler,但它通常用于最小化代码。

function hello(name) {
alert('Hello, ' + name);
}

function test(){
alert('hi');
}

hello('New user');

Will result in

会导致

alert("Hello, New user");

For example.

例如。

Another thing you could do is to use Chrome's Developer Tools (or Firebug) to see all function calls. Under Profilesyou can see which functions are being called over time and which are not.

您可以做的另一件事是使用 Chrome 的开发人员工具(或 Firebug)查看所有函数调用。在Profiles 下,您可以看到哪些函数随着时间的推移被调用,哪些函数没有被调用。

DT Profiles

DT 配置文件

回答by Nirus

Chrome has come up with new feature which lets developer see the code coverage, ie., which lines of codes were executed.

Chrome 推出了新功能,可以让开发人员查看代码覆盖率,即执行了哪些代码行。

This certainly is not a one stop solution, but can extend a helping hand to developers to get code insights.

这当然不是一站式解决方案,但可以帮助开发人员获得代码见解。

Check this linkfor details

查看此链接了解详情

Rolled as apart of Chrome 59release

作为Chrome 59版本的一部分滚动

tools

工具

回答by browserless

If you want to automate this I'd take a look at https://github.com/joelgriffith/navalia, which exposes an automated API to do just that:

如果你想自动化这个,我会看看https://github.com/joelgriffith/navalia,它公开了一个自动化的 API 来做到这一点:

const { Chrome } = require('navalia');
const chrome = new Chrome();

chrome.goto('http://joelgriffith.net/', { coverage: true })
  .then(() => chrome.coverage('http://joelgriffith.net/main.bundle.js'))
  .then((stats) => console.log(stats)) // Prints { total: 45913, unused: 5572, 
  percentUnused: 0.12135996340905626 }
  .then(() => chrome.done());

More here: https://joelgriffith.github.io/navalia/Chrome/coverage/

更多信息:https: //joelgriffith.github.io/navalia/Chrome/coverage/

回答by Mojtaba Izadmehr

You can use deadfilelibrary: https://m-izadmehr.github.io/deadfile/

您可以使用死文件库:https: //m-izadmehr.github.io/deadfile/

It can simply find unused files, in any JS project.

它可以简单地在任何 JS 项目中找到未使用的文件。

Without any config, it supports ES6, JSX, and Vue files: enter image description here

无需任何配置,它支持 ES6、JSX 和 Vue 文件: 在此处输入图片说明

回答by jstaab

I hate this problem, and that there are no good tools for solving it, despite the parse-heavy javascript ecosystem. As mentioned in another answer, deadfile is pretty neat, but I couldn't make it work for my codebase, which uses absolute imports from a srcdirectory. The following bash was good enough to get an idea of whether any files weren't imported anywhere (I found some!), which was easily hand-verifiable.

我讨厌这个问题,并且没有很好的工具来解决它,尽管有大量解析的 javascript 生态系统。正如在另一个答案中提到的,死文件非常简洁,但我无法让它适用于我的代码库,它使用src目录中的绝对导入。以下 bash 足以了解是否有任何文件未在任何地方导入(我找到了一些!),这很容易手动验证。

for f in $(find src -name '*.js' | grep -E 'src/(app|modules|components).*\.js$' | grep -v '.test.js'); do
  f=${f/src\//};
  f=${f/\/index.js/};
  f=${f/.js/};

  echo "$f imported in"$(grep -rl "$f" src | wc -l)" files"
done

I didn't care about tests/resources, hence the app|modules|components bit. The string replacements could be cleaned up significantly too, but hopefully this will be useful to someone.

我不关心测试/资源,因此 app|modules|components 位。字符串替换也可以显着清理,但希望这对某人有用。