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

Question

My main question is: If I import a type from a 3rd party library once into my project, and then import/export it several times internally, do I still incur the expense that I would from importing it each time directly from the 3rd party library?

Background:

I've recently started using an excellent vscode extension called import-cost which shows you the size of the packages you import. E.g.:

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

This has made me much more conscious of how everything I import will ultimately affect my final bundle size. One particular issue I've noticed, is with importing TypeScript types from 3rd party libraries. To import just one type, you still need to import the whole package. E.g.:

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

If this can't be ameliorated in some way, I'm just not sure it's worth it.

So, my question is: rather than importing this type every time I write a component, directly from angular, if I do something like the following, is it any less costly than importing it each time directly from angular? Example:

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;

If the IComponentOptions interface is imported from the shims file several times like this across my project, do I still incur the expense of the import each time, or is the concept of sharing across files internally less costly?

The overall question has larger implications than just typescript typings, but this is the particular use-case that sparked this at the moment.

If anyone can answer this, I would much appreciate it! Thank

POST-ANSWER EDIT:

As pointed out by the accepted answer, this actually seems to be a bug with the import-cost extension, as importing just types from libraries should not result in the module's code being imported. I've opened an issue here to hopefully resolve this issue.

Since the question does have further reaching implications, the other answer is also very useful, and it is important to note that although import-cost will show you the cost of each import, if you import something multiple times, it is no more costly than importing something once.

Answer 1

Actually I think the plugin is wrong. You can check the resuting JavaScript code, but imports that import only types from a module will be elided, as the types are not used in expressions. See FAQ

Answer 2

To your main question, no. When you import, you import from a module. Each module is imported just only once, and is defined by the file it is in. It does not matter how many times you import something or in how many files. It is either downloaded once by your module system, or packaged just once by your bundling tool.

It does not matter if you import/re-export types, either. In the end, you have to bundle the JavaScript package where type is included. In the case of lodash, lodash npm package comes in various formats: bundles with all the code for several module systems, and standalone JavaScript files for functions. That way you can download only the functions you need instead of the whole library.

I'm not sure about AngularJS, but if it is like Angular (versions 2+), then the whole library is in one JavaScript file, so, importing anything from it will make you download the whole file, or bundle it in your package. But, as stated, just once.

The way to minimise the JS payload of your page, is to use a bundler with tree-shaking capabilities. Tree-shaking can inspect what you use from a library and include just the code that you need, discarding the rest.