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

Question

在运行检查未使用的 imports 的脚本之后，例如 import XYZ from 'dir/XYZ.jsx' 其中从未使用过 XYZ ，我遇到过大约 300 个有此类问题的文件。大多数这些文件都缺少类似的东西，例如 React 的 Proptypes(从 'prop-types' 导入 PropTypes)。

听说webpack/babel导入后会缓存文件。如果这是真的，删除这些多次出现的未使用导入是否值得，还是我应该让它们单独存在？

请注意，我正在为 performance reasons 做这个项目以及代码清洁度。

Answer 1

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

Note that I'm doing this project for performance reasons and also for code cleanliness.

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

场景:

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

用例:

1. 作为该应用的用户，如果在日常路线上，出于某种原因我们加载了一个或多个库，但从未使用过，是否会产生性能成本？记住这些库:
   1. 有一定的执行时间。想象一下，在导入的模块中，我们实例化了一个新对象或执行了一些繁重的处理。
   2. 增加了用户的网络开销。
2. 从开发人员的 Angular 来看，如果我看到一个包含大量导入库的文件，第一眼是否足够清晰？
   1. 如果我在 DailyComponent 中导入 weeklyForecast 实用程序会怎样？我的观点是它具有误导性和混淆性，除非您查看整个 DailyComponent。也许有人会说我们为此有 Linters。但是，如果您不遵守 Linter 的规则和惯例，为什么还要使用 Linter？

从技术上讲，如果您导入从未使用过但提供给用户的东西，则会造成性能损失(用例 1)。我会建议你检查webpack optimization practices (最小化、重复数据删除、 block )。

你还知道Webpack Code Splitting吗？ ？

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

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

结论:

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

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