如何在 React 中删除未使用的依赖项
介绍
React 专注于使用外部依赖项进行开发。这些依赖项是作为npm包导入的可重用 React 组件。但是，依赖项过多的项目会阻碍低端设备和功能较弱的系统的性能。为了解决这个问题，必须跟踪项目中未使用的包并最终将其删除。本指南将告诉您如何使用一些简单的工具来执行此操作，而无需手动跟踪项目中的每个文件以查找未使用的包。
使用依赖项的影响
在项目中使用依赖项有很多用途。首先，它通过为您提供现成的工具和方法，帮助您轻松高效地执行复杂任务。其次，它使代码保持简洁、简短和可读，从而减轻了其他人难以理解您的代码的问题。最后，它节省了大量的开发时间。
但是，滥用项目中依赖项的自由会大大降低应用程序的性能。您可能会不知不觉地添加大量不必要的代码行，导致包大小变大。最常见的情况是，您安装了一个npm包，因为项目曾经需要它，但后来没有使用它，并且忘记手动将其删除。例如，如果您正在开发应用程序的前端，并且决定在 React 应用程序中使用bootstrap ，但后来决定应该使用material-ui，您可能会忘记从应用程序中卸载bootstrap。随着应用程序变得越来越大、越来越复杂，跟踪未使用的依赖项并手动删除它们变得越来越困难。
使用 depcheck 跟踪依赖关系
depcheck是一款使用 React 应用的package.json文件中npm提供的信息来分析依赖项的工具。它有助于识别应用中正在使用哪些npm包，哪些没有使用。
在空的 React 项目中，通过运行以下命令安装depcheck ：
npm install -g depcheck
这将在您的系统上全局安装depcheck。接下来，在您想要检查依赖项的文件夹中运行以下命令。
depcheck
确保此文件夹包含package.json文件，否则depcheck将无法跟踪您的依赖项。您通常需要在项目的根目录中运行此命令。
对空的 React 项目运行它将产生以下输出：
Unused dependencies
* @testing-library/user-event
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
因此，depcheck将未使用的依赖项列表与其他依赖项分开。要了解其工作原理，请安装react-bootstrap。
npm i react-bootstrap
再次运行depcheck 。
depcheck
由于您只安装了react-bootstrap包并且没有从中导入任何内容，因此depcheck将其显示为未使用的依赖项。
Unused dependencies
* @testing-library/user-event
* react-bootstrap
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
如果您在App.js中导入react-bootstrap组件...
import Button from 'react-bootstrap/Button';
...并再次运行depcheck，它不再显示未使用的依赖项下的react-bootstrap。
Unused dependencies
* @testing-library/user-event
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
这意味着depcheck仅检查您的导入而不是实际代码。
您还可以使用以下命令的语法传递其他参数。
depcheck [directory] [arguments]
[directory]参数是package.json文件所在的项目的根目录。如果未指定，则默认为当前目录。[arguments]参数可用于自定义输出。
使用 npm-check 跟踪依赖项
npm-check可以完成类似的依赖跟踪工作，但会以更具分析性和可读性的方式显示它们。它使用配色方案来传达有关应用程序中使用的npm包的不同信息。首先通过运行以下命令全局安装它。
npm install -g npm-check
按照上一节所述，在App.js中从react-bootstrap导入Button组件。
import Button from 'react-bootstrap/Button';
现在运行以下命令让npm-check分析您的依赖项。
npm-check
这会在命令行上显示对您的软件包的生动分析，并通过将未使用的软件包标记为NOTUSED来突出显示。
...
react-bootstrap NOTUSED? Still, using react-bootstrap?
Depcheck did not find code similar to require('react-bootstrap') or import from 'react-bootstrap'.
Check your code before removing as depcheck isn't able to foresee all ways dependencies can be used.
Use --skip-unused to skip this check.
To remove this package: npm uninstall --save react-bootstrap
....
它还会显示哪些软件包已过时且不正确，以及执行所需操作的相关命令。它有一个交互式 UI，可用于将模块更新到较新的版本。您可以尝试在任何实时项目中运行它以探索更多功能。
使用 npm uninstall 卸载软件包
一般来说，您可以通过运行以下命令来卸载任何npm包或依赖项：
npm uninstall <package_name>
让我们通过运行以下命令从项目中卸载react-bootstrap ：
npm uninstall --save react-bootstrap
--save标志表示模块记录将从package.json中删除。如果使用不带 save 标志的命令，npm将从package.json中删除模块记录，并从node_modules中删除模块文件夹。在较新版本的npm中，这两个命令本质上执行相同的操作。
npm-uninstall采用三个可选标志来保存或更新package.json文件中的包版本。
-S或--save标志表示该包将从主要依赖项中删除。
-D或--save -dev标志表示该包将从您的devDependencies中删除。
-O或--save -optional标志表示该包将从您的optionalDependencies中删除。
--no-save标志表示该包不会从package.json文件中删除。
结论
使用依赖项来跟踪另一个依赖项可能听起来很奇怪，但这是最简单、最安全的选择。depcheck和npm-check都很小，全局安装它们不会为您的生产构建添加额外的依赖项。使用它们来减少 React 项目的构建大小可以为您带来巨大的性能优势并加快您的开发过程。
了解更多
探索 Pluralsight 的这些 React 和 Bootstrap 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~