如何在一个大的反应项目中找到死代码？

为了重构客户端项目，我正在寻找一种安全的方法来查找(和删除)未使用的代码。

在大型反应项目中，您使用什么工具来查找未使用/死代码？我们的产品已经开发了好几年了，手动检测不再使用的代码变得非常困难。不过，我们确实会尽可能多地删除未使用的代码。

建议的一般战略/技术(除了具体的工具)也表示赞赏。

谢谢你

64228 次浏览
小开
最佳答案

首先，非常好的问题，在大型项目中，程序员通常会尝试多行代码进行测试，并在测试结果出来时，很难找到未使用的代码。

有两种可能性，必须为你的工作-我通常这样做，每当我需要删除和减少未使用的代码到我的项目。

第一种方式 WebStorm IDE:

如果你正在使用 网络风暴集成开发环境进行 JS 开发或 React JS/React Nativeor Vue JS 等，它会告诉我们，并指示我们不要在编辑器中使用不同颜色或红色警告作为未使用的代码

但是它在您的特定场景中不起作用，还有另一种方法可以删除未使用的代码。

第二条道路无需图书馆:

删除项目中未使用代码的第二种方法是不需要的库，您可以访问这里: 不必要的礼物

另一个在 NPM & github 给你下称为 depcheck 的库

只要按照他们适当的方法-如何使用他们，你会修复这个未使用的问题很容易

希望这能帮到你

小开

我的方法是集中使用 埃斯林特，并在每次推送之前让它在 IDE 广告上运行。

它指出未使用的变量、方法、导入等等。 Webpack (它有很好的插件来检测死代码)注意避免捆绑未导入的代码。

小开

我认为对于创建-反应应用程序引导应用程序来说，最简单的解决方案是使用 ESLint。尝试使用各种 webpack 插件，但每个插件都遇到了内存不足的问题。

使用 没有未使用的模块，它现在是 Eslint-plugin-import (插件导入)的一部分。

在设置了 eslint 之后，安装 eslint-plugin-import，在规则中添加以下内容:

"rules: {
...otherRules,
"import/no-unused-modules": [1, {"unusedExports": true}]
}
小开

诸如不需要的和死代码之类的库只支持遗留代码。 为了找到未使用的资产，要手动删除，可以使用 死档案

图书馆: https://m-izadmehr.github.io/deadfile/

  • 对 ES5，ES6，React，Vue，ESM，CommonJs 的开箱即用支持。
  • 它支持导入/要求甚至动态导入。

enter image description here

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

没有任何配置，它支持 ES6、 React、 JSX 和 Vue 文件: enter image description here

小开

找到了

使用 找到了，您可以找到项目中所有未使用的组件。只需安装并运行:

安装

npm i -g findead

用法

findead /path/to/search

enter image description here

小开

Webpack 的解决方案: 未使用的 WebpackPlugin

我在一个大型的前端 React 项目(1100 + js 文件)中工作，偶然发现了同样的问题: 如何找出哪些文件不再使用？

到目前为止，我已经测试了下一个工具:

没有一个真的管用。原因之一是我们使用“非标准”导入。除了在我们的 import的规则相对路径，我们还使用路径 解决了的 网络包解决方案功能，这基本上允许我们使用整洁的 import 'pages/something'，而不是繁琐的 import '../../../pages/something'。

未使用的 WebpackPlugin

感谢 Liam O’Boyle (elyobo)@GitHub，我终于找到了一个解决方案: Https://github.com/matthieulemoine/unused-webpack-plugin

它是一个 webpack 插件，所以只有当你的捆绑包是 webpack 时它才能工作。

我个人发现它很好，您不需要单独运行它，而是将其内置到构建过程中，在出现问题时抛出警告。

我们的研究主题: https://github.com/spencermountain/unrequired/issues/6

小开

解决方案:

对于节点项目，在项目根中运行以下命令:

npx unimported

如果使用流类型注释，则需要添加 --flow标志:

npx unimported --flow

资料来源及文件: https://github.com/smeijer/unimported

结果: enter image description here

背景资料

就像其他的答案一样，我尝试了很多不同的图书馆，但从来没有真正的成功。

我需要找到所有未被使用的文件。不仅仅是函数或变量。为了这个，我已经有了我的衬垫。

我试过 deadfile，unrequired，trucker，但都没有成功。

在寻找了一年多之后，还剩下一件事要做，那就是自己写点东西。

unimported从入口点开始，并遵循所有导入/需求语句。正在报告源文件夹中存在的所有未导入的代码文件。

注意，目前它只扫描源文件。不是为了图片或其他资产。因为它们通常以其他方式(通过标记或通过 css)“导入”。

而且，它会有假阳性。例如，有时我们编写的脚本旨在简化开发过程，比如构建步骤。这些不是直接进口的。

此外，有时我们安装对等依赖项，我们的代码不会直接导入这些依赖项。

但对我来说，unimported已经非常有用了。我从我的项目中删除了十几个文件。所以绝对值得一试。

如果您有任何问题，请让我知道。通过 github 的问题，或联系我的推特: https://twitter.com/meijer_s

小开

这个问题让我想起了当您运行构建命令时，在默认情况下执行响应会从 src 中删除 死码。

备注: 只有当您想将应用程序发布到生产环境时，才需要运行 build 命令。


提交答案