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

Question

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

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

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

谢谢

Answer 1

Webpack解决方案：UnusedWebpackPlugin

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

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

• findead
• deadfile
• unrequired

没有一个真正有效。原因之一是我们使用“非标准”进口。除了import中的常规相对路径之外，我们还使用webpack resolve功能的 resolved 路径，该功能基本上使我们可以使用整洁的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

Answer 2

解决方案：

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

npx unimported

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

npx unimported --flow

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

结果：

背景

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

我需要查找未使用的整个文件。不只是函数或变量。为此，我已经有了我的棉绒。

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

搜索了一年多之后，还有一件事情要做。自己写点东西。

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

注意，目前，它仅扫描源文件。不适用于图像或其他资产。因为这些通常是通过其他方式（通过标签或通过CSS）“导入”的。

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

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

但是对我来说，unimported已经非常有用。我从项目中删除了许多文件。因此，绝对值得一试。

如果您有任何麻烦，请告诉我。遇到github问题，或在Twitter上与我联系：https://twitter.com/meijer_s

Answer 3

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

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

WebStorm IDE的第一种方法：

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

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

第二种方法不归图书馆：

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

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

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

希望对您有帮助

Answer 4

诸如非必需代码和死代码之类的库仅支持旧代码。 为了找到未使用的资产，要手动删除，可以使用deadfile

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

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

没有任何配置，它支持ES6，React，JSX和Vue文件：

Answer 5

findead

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

安装

npm i -g findead

用法

findead /path/to/search

Answer 6

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

它指出未使用的变量，方法，导入等。 Webpack（对于死代码检测来说，它的插件太好了）要避免避免捆绑未导入的代码。

Answer 7

我认为对于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 8

这个问题让我想起了在运行build命令时默认情况下会从src中删除 deadcode 的问题。

注释： 仅在要将应用交付到生产环境时才需要运行build命令。