You have Gzip'd size; add Brotli to increase awareness that it's out in modern browsers, compresses better than gzip, and should be used more often.

For example:
https://github.com/broofa/node-uuid/blob/master/package.json#L21

take lodash for instance:

Now if I attempt the de-structuring syntax I should see the combined size of the de-structured methods. As you can see, it actually reports slightly larger.

Breaking them apart individually works fine.

The calculation shown for a de-structured lib should maybe just show the combined size of the individual pieces used? I think that would be safe since the best case for using that syntax is to cherry-pick what's included in the build during a tree-shaking process.

I can't seem to replicate this reliably. Some JS files have costs shown, and some don't—there's no rhyme or reason behind it.

When I open a webpack config file (such a build/webpack.base.conf.js from a VueJS template), the plugin generates a high CPU load but I don't care about the results because these files won't present in my app bundle.

Is it possible to add a setting to exclude some files or directories based on regex?

I think this will prevent some performance issues like #46 or #47

After installing the plugin, I opened a .js file with a single import. I see Calculating... appear but it never actually resolves to anything. I realize this isn't much information to go on so let me know how I can help to further investigate.

Sample failing ts code

test.ts :
import 'chai';

Any ideas on why this is happening?

[Extension Host] debugger inspector at %cmodule.js:472
    throw err;
    ^

Error: Cannot find module 'f:\Programing\react-components\node_modules\material-ui\FlatButt%con\package.json'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/%cmodule.js:20:19)
    at calcSize (C:\Users\Work\.vscode\extensions\wix.vscode-import-cost-2.6.0\node%c_modules\import-cost\dist\src\webpack.js:34:21)
    at handle (C:\Users\Work\.vscode\extensions\wix.vscode-import-cost-2.6.0\node_modules\worker-farm\lib\child\index.js:44:8)
    at process.<anonymous> (C:\Users\Work\.vscode\extensions\wix.vscode-import-cost-2.6.0\node_modules\worker-farm\lib\child\index.js:51:3)
    at emitTwo (events.js:106:13)
    at process.emit (events.js:194:7)
    at process.nextTick (%cinternal/child_process.js:766:12)

[Extension Host] debugger inspector at %cmodule.js:472
    throw err;
    ^

Error: Cannot find module 'f:\Programing\react-components\node_modules\material-ui\TextField\package.json'
    at Function.Module._resolveFilename (modul%ce.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at calcSize (C:\Users\Work\.vscode\extensions\wix.vscode-import-cost-2.6.0\node_modules\i%cmport-cost\dist\src\webpack.js:34:21)
    at handle (C:\Users\Work\.vscode\extensions\wix.vscode-import-cost-2.6.0\node_mo%cdules\worker-farm\lib\child\index.js:44:8)
    at process.<anonymous> (C:\Users\Work\.vscode\extensions\wix.vscode-%cimport-cost-2.6.0\node_modules\worker-farm\lib\child\index.js:51:3)
    at emitTwo (events.js:106:13)
    at%c process.emit (events.js:194:7)
    at process.nextTick (internal/child_process.js:766:12)

I use babel-plugin-import so I was wondering if is taken into consideration when calculating the sizes.

I'm not sure if we are supposed to have specific dependencies installed or if I am doing something wrong, but I am not seeing anything happen when importing modules.

Example:

Hi there - I noticed the import cost reported for preact-router is 5.1kb, which means it must be including the weight of preact itself in calculations (since preact-router is 2.0kb, preact is 3.3kb). Any thoughts around omitting imports of dependencies only specified as peerDependencies when performing a calculation? Seems like it could be accomplished by using peerDependencies to populate Webpack's externals config option.

Is there a way to configure the plugin to work inside of files that don't have the extension of .js (e.g .vue)?

For example:
import someFunction from '@my-org/my-repo/my-func';

Hello,

I really like this package, only thing that is missing for me is the functionality that would allow me to quickly toggle the annotations on/off with a keybind. Is there any way this can be done already through vscode?

This doesn't seem correct:

https://www.npmjs.com/package/node-uuid
https://github.com/broofa/node-uuid

• Extension Name: vscode-import-cost
• Extension Version: 2.5.1
• OS Version: Darwin x64 17.2.0
• VSCode version: 1.20.0-insider

{
	"activationTimes": {
		"startup": true,
		"codeLoadingTime": 4998,
		"activateCallTime": 1,
		"activateResolvedTime": 0,
		"activationEvent": "*"
	}
}

Hi,

if i don't put the semicolons at the end of the import statement the plugins doesn't decorate the line with the package size.

Hi,

please add support for vuejs single component file *.vue

https://vuejs.org/v2/guide/single-file-components.html

From @maxibanki on October 31, 2017 0:13

• VSCode Version: Code - Insiders 1.18.0-insider (8deed535e26bc8ceebf83a9aa631580ebd610918, 2017-10-30T05:21:47.015Z)
• OS Version: Windows_NT x64 6.1.7601
• Extensions:

(1 theme extensions excluded)

Steps to Reproduce: (not reproduceable)

1. Open Vetur settings
2. Click on contributions

Reproduces without extensions: Yes/No

Processes:

Command line:
"C:\Programme\VSCodeInsider\Code - Insiders.exe" C:\Users\mxs\.vscode-insiders\extensions\wix.vscode-import-cost-2.5.1\node_modules\worker-farm\lib\child\index.js "C:\Programme\VSCodeInsider\Code - Insiders.exe" c:\Programme\VSCodeInsider\resources\app\out\bootstrap --type=extensionHost
Process Explorer Performance Tab:

Hi,

I'm not so familiar with the process structure of VS Code, but in the command line arguments of the process which used so much RAM, there is the extension wix.vscode-import-cost-2.5.1 loading. Could this process used only for this extension, so that this is the cause of the high memory usage?

I tried to run the Dev Tools Performance Profiler, but it never finished, because of the always 100% usage of my memory in my notebook I think.

Best regards

Copied from original issue: microsoft/vscode#37192

• Extension Name: vscode-import-cost
• Extension Version: 2.5.1
• OS Version: Darwin x64 17.3.0
• VSCode version: 1.19.0

We have written the needed data into your clipboard. Please paste:

{
	"activationTimes": {
		"startup": true,
		"codeLoadingTime": 743,
		"activateCallTime": 0,
		"activateResolvedTime": 0,
		"activationEvent": "*"
	}
}

This is critical as at the end of the day, %temp% folder is having millions of unnecessary files with this plugin. It creates average one file every second.

• Extension Name: vscode-import-cost
• Extension Version: 2.5.1
• OS Version: Windows 7 Enterprise Service Pack 1
• VS Code:
  • Version: 1.19.1
  • Commit: 0759f77bb8d86658bc935a10a64f6182c5a1eeba
  • Date 2017-12-19T09:46:23.884Z
  • Shell 1.7.9
  • Renderer 58.0.3029.110
  • Node 7.9.0
  • Architecture x64

Reproduces without extensions: No

Initially I though it's an issue of VSCode. As soon as I start VSCode with an angular project, it started creating temp files having name like tmp-1468JkmT3B90uBgn.tmp in %temp% folder averaging 1 file/second.
After an hour, my '%temp%' was having more than 3500-4000 such files.

However, as soon as I disabled the plugin and started VSCode, no more files were created.

The files were having the content as below in each file..

import { Http, Response, Headers, RequestOptions } from '@angular/http'; console.log({ Http, Response, Headers, RequestOptions });
import { Observable } from 'rxjs/Observable'; console.log({ Observable });
import { AsyncSubject } from 'rxjs/AsyncSubject'; console.log({ AsyncSubject });

tmp-148402MhkXH8vCGgS.tmp.txt
tmp-1468JkmT3B90uBgn.tmp.txt

I've been moving to a different date library for my app and noticed that the calculated values don't seem to be right:

I would expect these calculations to be equal. Can someone explain if I'm doing something wrong or why they shouldn't be the same?

Thanks! 😄

It would be nice if you could also enable the use for imports like

import Test from '../../src/js/test';

Hi,

I use the gitlens from @eamodio together with import-cost. Thank you both for these great plugins.

It would be nice, if import-cost could be more compatible to gitlens. This could be done quite easily with an optional setting, I think: disable import-cost on currently selected line. Normally gitlens shows you the $ git blame information for the current line. But together with import-cost I can't see this information - and the information from import-cost just becomes gray.

I personally would be fine to see

• import-cost information if the line is not selected
• gitlens information if the line is selected

Maybe we can just add a "importCost.hideOnCurrentLine" setting which is false by default?

I'd love to see these messages on the package.json level and not on on every .js file. Could that be a possible setting?

For people like us on React Native it's extra important to consider the costs of modules we include. I think the benefit is saving these import costs from ever happening by never bringing in the code at all for modules that can't pull their weight.

Rationally, it might be an easy feature to switch all that calculating to the source in package.json.

Hi, I tried to see how you calculate the size but it seems that you depend on some webpack functionality.

i'm a bit puzzeled, as it shows some HUGE size for packages that I developed. For React and others all seems ok, but my package show 958KB! The source files in my package have only 126KB unminified. Where is the huge size coming from? Does this also include dependencies?

[EDIT] Package has no dependencies

If you want to try, the package is "apollo-authentication-semantic-ui"

There seems to be an issue with vue files

If you need an application, you can use any of this samples from here:

If you just need a sample file which does not work, here is one:

<template>
  <section class='row'>
    <div>Bridge</div>
  </section>
</template>

<script>
  import socket from '~plugins/socket.io.js'

  export default {
    mounted(){
     this.test()
    },
    data() {
      return {
        serverUrl: '127.0.0.1'
      }
    },
    methods: {
      test() {
        const connection = {serverURL: this.serverUrl};
      }
    }
  }
</script>

Hi! Thanks for this awesome extension.

I would have a small request concerning colors. For now I find them quite vivid and would like a more subtle version. I could do it manually but then those colors would be dependant on my editor background. And it's quite annoying to do.

Several solutions for this:

1. Add importCost.opacity: Accepting a value from 0 to 1, it would fade all the defined colors.
2. Allow importCost.*PackageColor to be specified as RGBA: #7cc36e0a.
3. Add importCost.*PackageOpacity so we can defined a different opacity for each color.

I think solution 1. is the simpler and make sure we have some consistency between all colors. But some users might want to keep small and medium package subtle and shout large package. So it's your call :)

I can provide a PR if you agree and choose one of those proposals.

Thanks!

Hey, I think this latest release and the previous one lacked changelog update (at least as of the time of release). That's a real shame, I love reading what I am updating for each time I update my extensions, so please consider adding that to some sort of a release checklist. Thank you!

Hi 👋

It looks like the plugin doesn't envify the bundle before computing the size. As a result, it is impossible for a library to provide "development mode" and benefit from dead code elimination in production mode without making it seem artificially larger. Even worse, providing flat bundles which in practice results in better performance and minification actually penalizes the library further because now both development and production copies are counted.

Quite a few libraries in the React ecosystem rely on this, including React and Redux themselves. This contributes to a trend of penalizing libraries that provide a development mode, which creates incentives for library developers to not provide it, hurting the library usability across the board.

In case of React the difference between the real and the reported size is especially staggering:

So it looks like import-cost is reporting the size as 3x larger than it would be in practice. You can verify it with tools like jsize or http://bundlephobia.com that have a correct algorithm.

There are two things that could be done to fix the measurements:

• Envifying process.env.NODE_ENV to "production" with DefinePlugin.
• peerDependencies need to be excluded from library's own measurements (#29).

For the first part, this should be enough. For the second part, here is an example of how to calculate externals from peerDependencies.

Please let me know if you have any concerns or questions, and I'd be very happy to answer them! Thanks for consideration.

Would be nice if import sizes were colour coded (maybe configurable?)

I'm not 100% sure what webpack uses nowadays for determining what large imports are, but I'm sure we can come up with some sane numbers?

Just a though, love the plugin!

not sure why, the graph below is simple record in my mac, with or without this extension in my vscode, not sure this is a bug or something else.

Package: kitsu
Version: 1.3.0
VSC: 1.14.2

ES6 and CommonJS imports result in no size being displayed after calculating

import Kitsu from 'kitsu'
const Kitsu = require('kitsu')

could the plugin also measure/report the size of javascript beeing loaded when linked inside html via <script> tag?

I'm getting the following when I try to install the extension:

Installing other extensions seems fine. I don't know where to find the folder in the message to check permissions either.

Any suggestions?

Extension Name: vscode-import-cost
Extension Version: 2.6.0
OS Version: macOS 10.13.2
VS Code:

• Version: 1.19.2
• Commit: 490ef761b76b3f3b3832eff7a588aac891e5fe80
• Date 2018-01-10T15:44:43.400Z
• Node 9.1.0

Reproduces without extensions: No

Importing from a lodash single function hangs the calculation and makes the fans spin up hugely on my rMBP. Quitting and restarting VSCode does not resolve it.

When the extension is enabled, the CPU is running extremely high. (80% - 100%).

OS: Ubuntu 16.04

I worked on a few design tweaks over the weekend. It would be great if you folks could share some feedback! Thanks!

Dark theme

Light theme

• I've used this emoji for the icon: 📦
• We could use it with the CSS content rule. E.g. content: "📦 44.5K (gzipped: 13.8K)";

Calculating result can not display when i miss ; at the end of the import code?

When you import a typescript type from a module, and nothing else from that module is used anywhere in an expression, typescript omits the module's code, and just imports the type, meaning the import cost of importing the type is not the cost of importing the entire module.

For example:

import { IComponentOptions } from 'angular'; // 168.3K

However, the import cost is really practically nothing.

This gave me a bit of a heart attack when I first installed the extension, until I figured this out. Any way to account for this?

No result for this:

import { Http, RequestOptions, URLSearchParams } from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/first";
import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/mergeMap";
import * as moment from "moment";
import { Storage } from "@ionic/storage";
import { Firebase } from "@ionic-native/firebase";
import * as URI from "urijs";

if I delete these lines:

import "rxjs/add/operator/map";
import "rxjs/add/operator/first";
import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/mergeMap";

Everything works again.

i hate to see the word of "calculating" right of import, is there one way to make it silent?

Great idea and plugin!

We use https://github.com/lodash/babel-plugin-lodash to map local names to sub-paths. I figure it would make sense when this plugin is configurable to support the plugin. Right now a lot of libraries work in the same schema like recompose or even frameworks like react-toolbox.

See also our babel config:
https://github.com/sebastian-software/babel-preset-edge/blob/master/src/index.js#L73

Alternatively... probably it would be also a good idea to just use the project's babel configuration in your webpack run.

In our projects we have multiple package.json files and node_modules directories down the tree.

If I open a file that imports a package from a tree higher up, it won't resolve the package at all.

An example:

project
 |- node_modules/ (contains axios)
 |- package.json (contains axios)
 |- sub_dir/
   |- node_modules/ (does not contain axios)
   |- package.json (does not contain axios)
   |- API.js (imports axios)

Great extension!

Would love to use it in jetbrains IDE's like webstorm.

Thanks!