值得在大型代码库中删除未使用的导入吗？

Question

运行一个脚本，未使用的检查后imports，如import XYZ from 'dir/XYZ.jsx'在那里XYZ从未使用过，我遇到约300具有这类问题的文件。这些文件大多数都缺少类似的内容，例如ProptypesReact（import PropTypes from 'prop-types'）。

我听说导入了webpack / babel缓存文件。如果这是真的，那么删除多次出现的这些未使用的进口是否值得，还是我应该让他们独自一人？

请注意，我出于性能原因和代码清洁度而进行此项目。

Answer 1

您已经回答了自己的问题：

\n\n

\n

请注意，我做这个项目是出于性能原因，也是为了代码整洁。

\n

\n\n

然而，让我们通过示例场景和一些用例来打破答案。

\n\n

设想：

\n\n

假设我们有一个预测应用程序。当用户转到每日预报路线时，他只想获取当天的信息。

\n\n

用例：

\n\n

\n
1. 作为应用程序的用户，如果在日常路线上，由于某种原因我们加载一个或多个从未使用过的库，是否会产生性能成本？记住这些库：\n\n
   \n
   1. 有某种类型的执行时间。想象一下，在导入的模块中，我们实例化一个新对象或执行一些繁重的处理。
   \n
   2. 增加了用户的网络开销。
   \n
\n
2. 作为开发者的角度，是否足够清晰如果我看到一个包含一堆导入库的文件，第一眼
   \n
   1. 如果我weeklyForecast在 中导入实用程序呢DailyComponent？我的观点是，除非您回顾整个DailyComponent. 也许有人会说我们有 Linters 来解决这个问题。但是，如果您不遵循 Linter 的规则和约定，为什么还要使用它呢？
   \n
\n

\n\n

从技术上讲，如果您导入从未使用过但提供给用户的某些内容，则会造成性能损失（用例 1）。我建议您检查webpack 优化实践（最小化、重复数据删除、分块）​​。

\n\n

你还了解Webpack 代码分割吗？

\n\n

\n

代码分割是 webpack 最引人注目的功能之一。此功能允许您将代码分割成各种包，然后可以按需或并行加载。它可用于实现较小的捆绑包并控制资源加载优先级，如果使用正确，可能会对加载时间产生重大影响。

\n

\n\n

现在想象一下，如果您在应用程序中进行代码拆分，但仍然有许多未使用的导入。\xd0\xa2hat 会增加应用程序的初始加载时间，并且会违反代码分割的想法。

\n\n

结论：

\n\n

对于新项目，显然包含未使用的导入没有任何好处。

\n\n

根据您的情况，您可以测量有或没有未使用的导入的特定路线的加载时间。大多数 IDE 都提供此功能来删除未使用的导入，因此您可以计算影响。

\n