限制从 3rd 方库导入 typescript 类型的成本？

Question

我的主要问题是：如果我将一个类型从 3rd 方库导入一次到我的项目中，然后在内部多次导入/导出它，我是否仍会产生每次直接从第三方库？

背景：

我最近开始使用名为 import-cost 的出色 vscode 扩展程序，它可以显示您导入的包的大小。例如：

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

这让我更加清楚我导入的所有内容最终将如何影响我的最终包大小。我注意到的一个特殊问题是从 3rd 方库中导入 TypeScript 类型。要仅导入一种类型，您仍然需要导入整个包。例如：

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

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

所以，我的问题是： 与其每次编写组件时都直接从 angular 导入这种类型，如果我执行以下操作，是否比每次都导入成本更低直接从角度？示例：

path/to/my/project/types/shims.d.ts

export { IComponentOptions } from 'angular';

path/to/my/project/components/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;

如果在我的项目中多次像这样从shims文件导入IComponentOptions接口，是不是每次都要承担导入的费用，还是内部跨文件共享的概念少了？贵吗？

整个问题的含义不仅仅是打字稿打字，但这是目前引发此问题的特定用例。

如果有人能回答这个问题，我将不胜感激！谢谢

回答后编辑：

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

由于该问题确实具有更深远的影响，因此另一个答案也非常有用，重要的是要注意，尽管 import-cost 会显示每次导入的成本，但如果您多次导入某些内容，则不会比进口一次更昂贵。

Answer 1

对于您的主要问题，不。导入时，您从模块导入。每个模块只导入一次，并由它所在的文件定义。导入多少次或导入多少个文件并不重要。它要么由您的模块系统下载一次，要么由您的捆绑工具打包一次。

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

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

最小化页面的 JS 负载的方法是使用具有 tree-shaking 功能的捆绑器。 Tree-shaking 可以检查您从库中使用的内容，并仅包含您需要的代码，而丢弃其余代码。

Answer 2

其实我认为插件是错误的。您可以检查返回的 JavaScript 代码，但仅从模块中导入类型的导入将被忽略，因为这些类型未在表达式中使用。见FAQ