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

Question

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

背景:

我最近开始使用一个名为 import-cost 的优秀 vscode 扩展它显示了您导入的包的大小。例如:

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

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

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

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

所以，我的问题是: 与其每次编写组件时都直接从 Angular 导入这种类型，如果我做类似下面的事情，是否比每次都导入它的成本更低直接从角度？示例:

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

export { IComponentOptions } from 'angular';

路径/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;

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

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

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

回答后编辑:

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

既然这个问题确实有更深远的影响，那么另一个答案也很有用，需要注意的是，虽然 import-cost 会显示每次导入的成本，但如果多次导入某个东西，则不会比进口一次的成本更高。

Answer 1

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