Question

我的主要问题是：如果我将一个类型从第三方库导入到我的项目中，然后在内部导入/导出几次，我是否仍然需要每次直接从导入它的费用第三方图书馆？

背景

我最近开始使用名为import-cost的优秀vscode扩展程序，它会显示您导入的程序包的大小。 E.g：

import { cloneDeep } from 'lodash'; 70.7K
import cloneDeep from 'loadash/cloneDeep'; 14.9K // way better!!

这使我更加意识到我导入的所有内容最终会影响我的最终包大小。我注意到的一个特殊问题是从第三方库导入TypeScript类型。要仅导入一种类型，您仍需要导入整个包。 E.g：

import { IComponentOptions } from 'angular'; 168.3K // Not cool!!!

如果不能以某种方式改善，我只是不确定它是否值得。

所以，我的问题是：而不是每次我写一个组件时直接从角度导入这种类型，如果我做类似下面的事情，它是否比每次导入它更便宜直接来自角？例如：

路径/到/我/项目/类型/ shims.d.ts

export { IComponentOptions } from 'angular';

路径/到/我/项目/组件/ myComponent的/ myComponent.cmpt.ts

import { IComponentOptions } from "../../types/shims";
import controller from './myComponent.ctrl';
import template from './myComponent.tpl.html';

const myComponent: IComponentOptions = {
  template,
  controller,
  bindings: {
    someBinding: '@'
  }
};

export default myComponent;

如果IComponentOptions接口在我的项目中多次从shims文件导入，我是否仍然每次都要承担导入费用，或者是共享的概念跨文件内部成本更低？

整体问题的影响大于打字稿类型，但这是目前引发这种情况的特殊用例。

如果有人能回答这个问题，我会非常感激！感谢

POST-ANSWER编辑：

正如接受的答案所指出的，这实际上似乎是导入成本扩展的一个错误，因为从库中仅导入类型不应导致导入模块的代码。我已经打开了一个问题here，希望能够解决这个问题。

由于这个问题确实有进一步的影响，另一个答案也非常有用，重要的是要注意虽然import-cost会显示每次导入的成本，但如果你多次导入，则不是比进口一次更昂贵。

Answer 1

其实我觉得这个插件是错误的。您可以检查重新生成的JavaScript代码，但是将省略从模块中仅导入类型的导入，因为表达式中未使用这些类型。见FAQ

Answer 2

对于你的主要问题，没有。导入时，从模块导入。每个模块只导入一次，并由它所在的文件定义。导入内容或文件数量无关紧要。它可以由您的模块系统下载一次，也可以通过捆绑工具打包一次。

导入/重新导出类型也没关系。最后，您必须捆绑包含类型的JavaScript包。在lodash的情况下，lodash npm包有各种格式：捆绑包含多个模块系统的所有代码，以及用于函数的独立JavaScript文件。这样，您只能下载所需的功能而不是整个库。

我不确定AngularJS，但如果它像Angular（版本2+），则整个库都在一个JavaScript文件中，因此，从中导入任何内容都将让你下载整个文件，或将其捆绑在你的包中。但是，如上所述，只有一次。

最小化页面的JS有效负载的方法是使用具有树抖动功能的捆绑器。树木震动可以检查你从库中使用的内容，只包括你需要的代码，丢弃其余的代码。

限制从第三方库导入打字稿类型的成本？

POST-ANSWER编辑：

2 个答案: