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

Question

我的主要问题是：如果我将一个类型从第 3 方库导入到我的项目中，然后 import/export 在内部多次导入它，我是否仍会承担每次导入它所产生的费用时间直接来自第 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 导入这种类型，如果我做类似下面的事情，是它比每次直接从 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接口，我是否仍然需要承担每次导入的费用，或者是在内部跨文件共享成本更低的概念？

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

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

POST-答案编辑：

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

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

Answer 1

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

Answer 2

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

如果您 import/re-export 打字也没关系。最后，您必须捆绑包含 type 的 JavaScript 包。在 lodash 的情况下，lodash npm 包有多种格式：捆绑多个模块系统的所有代码，以及用于函数的独立 JavaScript 文件。这样你就可以只下载你需要的函数而不是整个库。

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

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

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

limit cost of importing typescript types from 3rd party libraries?

import

bundle

typescript

typescript-typings

POST-答案编辑：