Show "Cost" of Imports (in VS Code)

[Sujan12]

Just stumbled over this neat little plugin for VS Code

This extension will display inline in the editor the size of the imported package.
The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

Import Cost - Visual Studio Marketplace

Produces something like this for Ionic projects:

For now I have no idea how precise these numbers are, but I will sure test this later.

[quieterkali]

Really cool this extensions, @Sujan12 thanks for sharing

[rapropos]

@Sujan12

I have no idea how precise these numbers are,

1 vote for “virtually useless”, for two reasons:

• since it shows nothing for your own code, it’s only looking at the size of things in node_modules
• no way does it have any idea what ngc is going to do WRT dead code elimination

UPDATE: See further convo with author below

[yairhaimo]

1. It only looks inside node_modules as a design decision - the 3rd party libraries that people import without thinking twice are at the root of all the bloated bundles that we ship to our users.
2. The extension takes webpack’s tree shaking mechanism into consideration in order to calculate the size of the packages. Granted, it does not utilize ngc for angular imports.

Disclaimer: I’m one of the developers of this extension.

[rapropos]

@yairhaimo

The extension takes webpack’s tree shaking mechanism into consideration in order to calculate the size of the packages.

That’s very interesting. So it is capable of accurately assessing me importing a big library and yet actually only using one function? How does it know when to recalculate this?

[yairhaimo]

The way it does it is by taking the actual line of code, lets say “import {func1} from ‘utils’” and putting it in a temporary file which we run webpack on. Webpack with the babili uglify plugin tree shakes the unused code and leaves only “func1” in this example. We then get the size of the bundle and display it.

We’re going to publish a blog post that will go into more detail soon but this is the gist of the matter.

[rapropos]

@yairhaimo

The way it does it is by taking the actual line of code, lets say “import {func1} from ‘utils’” and putting it in a temporary file which we run webpack on.

Thanks for responding. I’m not sure if ionic-app-scripts does any additional dead code elimination above and beyond that, but I can definitely now see how this plugin would at least help developers be more mindful about making their imports as narrow as possible (such as avoiding importing all of rxjs instead of specific operators).

[Sujan12]

Thanks @yairhaimo for jumping into the discussion! For now I just have it running in VS Code and see what it returns.

(Feedback: Some other extensions I am using [something to automatically import missing libraries and classes] have to wait until the calculation is done, which can take some time, before they can execute it seems. Would be nice if the extension didn’t influence/block others)

[yairhaimo]

Which extensions are those? I would like to take a look at it.

[Sujan12]

@yairhaimo

Which extensions are those? I would like to take a look at it.

Auto Import - Visual Studio Marketplace didn’t render the in the margin (that can be clicked to fix) for a missing import.

[yairhaimo]

Thanks, ill check it out.