如何在大型React项目中找到无效代码？

Question

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

您使用什么工具在大型React项目中查找未使用/无效的代码？我们的产品已经开发了几年，并且很难手动检测不再使用的代码。但是，我们确实尝试删除尽可能多的未使用的代码。

对于一般策略/技术（除特定工具之外）的建议也将受到赞赏。

谢谢

Answer 1

解决方案：

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

npx unimported

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

npx unimported --flow

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

结果：

背景

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

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

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

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

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

请注意，此时它仅扫描源文件。不适用于图像或其他资产。因为那些通常以其他方式“导入”（通过标签或通过 css）。

此外，它还会有误报。例如; 有时我们编写脚本是为了简化我们的开发过程，例如构建步骤。那些不是直接进口的。

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

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

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

Answer 2

Webpack 解决方案：UnusedWebpackPlugin

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

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

• 发现
• 死文件
• 不需要

他们都没有真正奏效。原因之一是我们使用“非标准”进口。除了我们imports 中的常规相对路径之外，我们还使用由webpack 解析功能解析的路径，这基本上允许我们使用整洁而不是繁琐的.import 'pages/something'import '../../../pages/something'

未使用的 Webpack 插件

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

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

我个人觉得你不需要单独运行它是一件好事，而是它内置在你的构建过程中，当出现问题时会发出警告。

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

Answer 3

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

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

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

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

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

Answer 4

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

使用no-unused-modules ，它现在是eslint-plugin-import的一部分。

设置 eslint、安装 eslint-plugin-import 后，将以下内容添加到规则中：

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

Answer 5

首先，这是一个很好的问题，在大型项目中，编码人员通常尝试进行多行代码测试，结果最后很难找到未使用的代码。

有两种可能必须为您工作-通常在需要删除未使用的代码并将其减少到我的项目中时，我通常都会这样做。

WebStorm IDE的第一种方法：

如果您使用Web-storm IDE进行JS开发或React JS / React Native或Vue js等，它会告诉我们并以不同的颜色或红色警告来表示我们提到的提及内容，作为编辑器中未使用的代码

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

第二路不归还图书馆：

删除项目中未使用的代码的第二种方法是未返回的库，您可以在这里访问：未返回的github

另一个叫depcheck下NPM和GitHub的库在这里

只需遵循其适当的方法-如何使用它们，即可轻松解决此未使用的问题

希望对您有帮助