值得删除大代码库中未使用的导入?

时间:2018-06-06 08:41:17

标签: javascript node.js webpack babeljs

运行检查未使用imports的{​​{1}}未使用的import XYZ from 'dir/XYZ.jsx'的脚本后,我遇到了大约300个存在此类问题的文件。大多数这些文件都缺少类似的内容,例如React(XYZ)的Proptypes

我在导入后听说webpack / babel缓存文件。如果这是真的,那么删除多次出现的未使用的导入是否值得,或者我应该将它们单独留下?

请注意,我正在为performance reasons执行此项目以及代码清洁。

1 个答案:

答案 0 :(得分:1)

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

  

请注意,出于性能原因,我正在执行此项目   代码清洁度。

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

<强>方案

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

用例

  1. 作为应用的用户,是性能成本,如果在每日路线上,由于某种原因我们加载了一个或多个库,从未使用过?考虑到这些库:
    1. 有一些执行时间。想象一下,在导入的模块中,我们实例化一个新对象或执行一些繁重的处理。
    2. 为用户增加了网络开销。
  2. 从开发人员的角度来看,如果我看到一个包含大量导入库的文件,那么第一眼就能显而易见吗?
    1. 如果我在weeklyForecast中导入DailyComponent实用程序怎么办?我的观点是,这是误导和混淆,除非你审查整个DailyComponent。也许有人会说我们有Linters。但是,如果你不遵守其规则和惯例,为什么要使用Linter?
  3. 从技术上讲,如果您导入的内容从未使用过,但会向用户提供,则会导致性能下降(用例1)。我建议你检查webpack optimization practices(最小化,重复数据删除,块)。

    您也知道Webpack Code Splitting吗?

      

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

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

    <强>结论

    对于新项目,显然包含未使用的进口没有任何好处。

    根据您的情况,您可以衡量特定路线的加载时间是否包含未使用的导入。大多数IDE都提供此功能来删除未使用的导入,因此您可以计算影响。

相关问题