找到死的 JavaScript 代码？答案

【问题标题】：find dead JavaScript code?找到死的 JavaScript 代码？
【发布时间】：2010-11-09 17:41:13
【问题描述】：

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

【问题讨论】：

Dead 代码意味着永远不会运行的代码？
@Felix，不完全是......它是“永远无法运行”的代码......例如一个已定义但其名称从未在应用程序其他地方提及的函数
Dead 比“未明显调用”更复杂。看我的回答。

标签： javascript refactoring dead-code

【解决方案1】：

无需寻找太复杂的东西：

JSLint（不是真正的静态分析器，但如果你给它你的级联开发代码，你会看到哪些方法永远不会被调用，至少在明显的作用域上下文中）
Google Closure Compiler
Google Closure Linter

【讨论】：

【解决方案2】：

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

ack 也是 grep 的显着替代品。

【讨论】：

是的，grep 对于查找这类东西真的很方便。
但是dostuff 的 grep 就可以了。
@Skilldrick 哦，我忘了那些（我猜这就是为什么这被否决了）。 grep 仍然有用，如果您只使用方法名称而不使用 ()。
是的。顺便说一句，我没有投反对票。另外，我认为您的意思是“除非您发现定义以外的任何内容”:)
还有var a = new dustuff;（两个括号）如果它是一个构造函数，但列表还在继续，dostuff.apply(null)、obj["dostuff"]() 或obj["do"+"stuff"]()。等等……

【解决方案3】：

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

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

无需任何配置，支持 ES6、JSX 和 Vue 文件：

【讨论】：

看起来很有希望，但我一辈子都做不到
您面临的问题是什么？
尝试在 react native 项目中使用它，尝试排除 ios 文件，尝试包含 JavaScript 源目录以及其他各种组合以使其正常工作，而我取得的最远成绩是它开始扫描文件只是为了在 1 秒后冻结终端，无论我尝试了多少次，都是一样的。此外，如果我不包含目录并且只使用输入文件，它会打开一个浏览器窗口，但随后什么也不做，也找不到任何文件。我在 osx 顺便说一句。
@SudoPlz 我发布了针对此问题的修复程序，您能否检查一下它是否也解决了您的问题？

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

hello('New user');

会导致

alert("Hello, New user");

例如。

您可以做的另一件事是使用 Chrome 的开发者工具（或 Firebug）查看所有函数调用。在 Profiles 下，您可以看到随着时间的推移调用了哪些函数，哪些没有。

【讨论】：

我把圣诞老人的小帮手想象成更多的 Amiga 用户。不过你肯定能打字。
Google Closure Compiler 的妙处——它不仅优化（如上所述），而且会检测到无法访问的代码（例如死代码）并将其完全删除（至少这是我的理解）

【解决方案6】：

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

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

查看link了解详情

作为 Chrome 59 版本的一部分推出

【讨论】：

【解决方案7】：

如果您想自动执行此操作，我会查看 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());

【讨论】：

【解决方案8】：

我讨厌这个问题，并且没有很好的工具来解决它，尽管 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

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

【讨论】：