Import Cost 
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.
This project includes implementation of:
- Import Cost VSCode extension - install it from VSCode Marketplace
- Import Cost Node module - use freely to implement extensions for other IDE (or contribute them to this repository)
Enjoy!
Third-Party Editor Plugin Links
- Jetbrains IDE Plugin
- Atom Package
- Vim Plugin (coc.nvim extension)
- Vim Plugin
Why & How
I detail the Why and How in this blog post:
https://medium.com/@yairhaimo/keep-your-bundle-size-under-control-with-import-cost-vscode-extension-5d476b3c5a76
Developer guidelines
In this project we use lerna for managing the multiple packages.
Getting started
In order to start working all you need to do is:
$ git clone git@github.com:wix/import-cost.git
$ npm install
$ code packages/import-cost
$ code packages/vscode-import-cost
Once VSCode workspaces are open:
- Hit
F5to run tests inimport-cost - Hit
F5to run thevscode-import-costextension in debug mode
Applying changes
Thanks to lerna, we have a symbolic link in the vscode-import-cost node modules folder to the local import-cost, which makes applying changes very easy. You can verify that link exists by running the following command:
$ ls -la packages/vscode-import-cost/node_modules, grep import-cost
lrwxr-xr-x 1 shahart staff 17 Aug 6 09:38 import-cost -> ../../import-cost
If anything goes wrong and link does not exist, just run the following commands at the root of this project and lerna will sort it out:
$ git clean -xdf
$ npm install
After you make any changes to the import-cost node module, don't forget to trigger transpilation in order to see those changes when running the vscode-import-cost extension:
$ npm test
Publishing changes
When you are ready to publish a new version of the extension, you first need to publish a new version of import-cost (unless nothing changed there). This is done by first commiting all your changes, then simply run the following commands:
$ cd packages/import-cost
$ npm version patch, minor, major
$ git commit -a -m "releasing version X.X.X"
$ git push
$ npm publish
Then go ahead and release the extension with almost same steps (except for last one):
$ cd packages/vscode-import-cost
$ npm version patch, minor, major
$ git commit -a -m "releasing version X.X.X"
$ git push
$ git clean -xdf && npm install && vsce publish
See how in the last step we had to clean everything and do a clean npm install in the extension folder? This is an important step so that vsce publish will bundle everything correctly when publishing the extension. After that's done, you'll need to run following command so that lerna will sort everything out again:
$ cd ../..
$ git clean -xdf
$ npm install
Don't forget to update README.md with details of what is new in the released version...