如何在大型 React 项目中查找死代码？

Question

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

您使用什么工具在大型 React 项目中查找 unused/dead 代码？我们的产品已经开发多年，手动检测不再使用的代码变得越来越困难。但是，我们会尝试尽可能多地删除未使用的代码。

也欢迎对通用 strategies/techniques（特定工具除外）的建议。

谢谢

Answer 1

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

有两种可能对您有用 - 我通常在需要删除和减少未使用的代码到我的项目中时这样做。

第一种 WebStorm IDE:

如果您使用 web-storm IDE 进行 JS 开发或 React JS / React Native 或 Vue js 等，它会告诉我们并指示我们在编辑器中使用不同颜色或红色警告作为未使用代码的大量提及

但它在您的特定情况下不起作用还有另一种方法可以删除未使用的代码。

第二种方式不需要库：

删除项目中未使用代码的第二种方法是不需要的库，您可以在此处访问： unrequired github

另一个名为 depcheck 的库在 NPM 下 & github here

只要按照他们适当的方法-如何使用它们，您将轻松解决这个未使用的问题

希望对你有所帮助

Answer 2

我的方法是大量使用 ESlint 并在每次推送前都在 IDE 广告上使用运行。

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

Answer 3

我认为 create-react-app 引导应用程序最简单的解决方案是使用 ESLint。尝试使用各种 webpack 插件，但运行每个插件都出现内存不足问题。

使用no-unused-modules which is now a part of eslint-plugin-import.

设置eslint后，安装eslint-plugin-import，在规则中添加如下内容：

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

Answer 4

unrequired 和 deadcode 等库仅支持遗留代码。为了找到未使用的资产，手动删除，可以使用 deadfile

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

对 ES5、ES6、React、Vue、ESM、CommonJs 的开箱即用支持。
它支持import/require甚至动态导入。

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

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

Answer 5

找死

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

安装

npm i -g findead

用法

findead /path/to/search

Answer 6

Webpack 解决方案：UnusedWebpackPlugin

我在一个大型前端 React 项目（1100 多个 js 文件）上工作，偶然发现了同样的问题：如何找出哪些文件不再被使用？

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

None 其中确实有效。原因之一是我们使用“非标准”进口。除了 import 中的常规相对路径外，我们还通过 webpack resolve 功能使用路径 resolved，这基本上允许我们使用整洁的 import 'pages/something'而不是繁琐 import '../../../pages/something'.

未使用的WebpackPlugin

感谢 Liam O'Boyle (elyobo) @GitHub，这是我终于找到的解决方案： https://github.com/MatthieuLemoine/unused-webpack-plugin

这是一个 webpack 插件，所以只有当你的 bundler 是 webpack 时它才会工作。

我个人认为您不需要单独运行它很好，而是内置在您的构建过程中，当出现问题时会发出警告。

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

Answer 7

解决方案：

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

npx unimported

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

npx unimported --flow

来源和文档：https://github.com/smeijer/unimported

结果：

背景

就像其他答案一样，我尝试了很多不同的库，但从未取得真正的成功。

我需要找到未使用的整个文件。不仅仅是函数或变量。为此，我已经有了 linter。

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

找了一年多，还有一件事要做。自己写点东西。

unimported 从您的入口点开始，然后是您所有的 import/require 语句。将报告存在于源文件夹中但未导入的所有代码文件。

注意，目前它只扫描源文件。不适用于图像或其他资产。因为它们通常以其他方式 "imported"（通过标签或通过 css）。

另外，它会有误报。例如;有时我们编写旨在简化开发过程的脚本，例如构建步骤。这些不是直接导入的。

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

不过对我来说，unimported已经很有用了。我已经从我的项目中删除了很多文件。所以绝对值得一试。

如果您有任何问题，请告诉我。通过 github 个问题，或在 Twitter 上联系我：https://twitter.com/meijer_s

Answer 8

这个问题让我想起当你运行构建命令时，默认情况下反应会从 src 中删除 deadcode。

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

如何在大型 React 项目中查找死代码？

How to find dead code in a large react project?

javascript

reactjs

refactoring

dead-code

找死

安装

用法

Webpack 解决方案：UnusedWebpackPlugin

未使用的WebpackPlugin

解决方案：

背景