限制从第三方库导入typescript类型的成本?

限制从第三方库导入typescript类型的成本?,typescript,import,bundle,typescript-typings,Typescript,Import,Bundle,Typescript Typings,我的主要问题是:如果我将一个类型从第三方库导入到我的项目中,然后在内部多次导入/导出它,那么每次直接从第三方库导入它时,我是否仍会产生费用 背景: 我最近开始使用一个名为的优秀vscode扩展,它可以显示导入的包的大小。例如: import { cloneDeep } from 'lodash'; 70.7K import cloneDeep from 'loadash/cloneDeep'; 14.9K // way better!! 这让我更加意识到我导入的所有内容最终将如何影响最终的捆绑

我的主要问题是:如果我将一个类型从第三方库导入到我的项目中,然后在内部多次导入/导出它,那么每次直接从第三方库导入它时,我是否仍会产生费用

背景:

我最近开始使用一个名为的优秀vscode扩展,它可以显示导入的包的大小。例如:

import { cloneDeep } from 'lodash'; 70.7K
import cloneDeep from 'loadash/cloneDeep'; 14.9K // way better!!
这让我更加意识到我导入的所有内容最终将如何影响最终的捆绑大小。我注意到的一个特别问题是从第三方库导入TypeScript类型。要仅导入一种类型,仍然需要导入整个包。例如:

import { IComponentOptions } from 'angular'; 168.3K // Not cool!!!
如果这不能以某种方式得到改善,我只是不确定它是否值得

因此,我的问题是:与其每次直接从angular编写组件时导入此类型,不如执行以下操作,是否比每次直接从angular导入成本更低?例如:

路径/到/我的/项目/类型/垫片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
接口,我是否仍要承担每次导入的费用,或者跨文件内部共享的概念成本更低?

整体问题的含义比打字脚本更大,但这是目前引发这一问题的特定用例

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

回答后编辑: 正如公认的答案所指出的,这实际上似乎是导入成本扩展的一个bug,因为仅从库中导入类型不应导致导入模块的代码。我打开了一个问题,希望能解决这个问题


因为这个问题确实有更深远的含义,所以另一个答案也非常有用,需要注意的是,尽管导入成本会显示每次导入的成本,但如果您多次导入某个内容,成本不会比导入一次内容高。

事实上,我认为插件是错误的。您可以检查resuting JavaScript代码,但是只从模块导入类型的导入将被省略,因为这些类型不在表达式中使用。请参见您的主要问题,否。导入时,您从模块导入。每个模块只导入一次,并由其所在的文件定义。导入多少次或导入多少文件并不重要。它可以由模块系统下载一次,也可以由捆绑工具打包一次

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

我不确定AngularJS是否为
AngularJS
,但如果它类似于
AngularJS
(版本2+),那么整个库都在一个JavaScript文件中,因此,从中导入任何内容都会使您下载整个文件,或者将其捆绑到包中。但是,如上所述,只有一次


最小化页面JS负载的方法是使用具有树震动功能的绑定器。树摇动可以检查您从库中使用的内容,只包含您需要的代码,而丢弃其余的。

虽然我同意您回答的要点,但我认为值得一提的是,如果您在表达式中不使用任何导入的符号,Typescript将在生成的代码中忽略导入。如果导入一个interece,他的用例总是在这种情况下。那么你是说我从“lodash”导入并不重要吗
在每个文件中,总费用仍然只有lodash模块的1个实例的大小?我想这是有道理的,我想这只是意味着这个扩展有点误导。是的,毕竟模块的工作方式与函数类似:无论何时调用函数,都不会注入其所有代码。当您从模块导入时,您不需要再次下载或捆绑它。是的!你说得对,这绝对是个好消息。我想他们想到这一点并不奇怪。也许我会提出一个关于延期回购的问题,因为这是一个要点。谢谢你的回答!提出了一个问题,希望将来能解决这个问题