Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wix/import-cost
displays the import size of the package you are importing inside the code editor
https://github.com/wix/import-cost
perfmatters performance performance-analysis performance-visualization vscode webpack webperf
Last synced: 29 days ago
JSON representation
displays the import size of the package you are importing inside the code editor
- Host: GitHub
- URL: https://github.com/wix/import-cost
- Owner: wix
- License: mit
- Created: 2017-07-15T08:50:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-23T18:56:29.000Z (8 months ago)
- Last Synced: 2024-10-11T08:05:24.103Z (about 1 month ago)
- Topics: perfmatters, performance, performance-analysis, performance-visualization, vscode, webpack, webperf
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
- Size: 3.21 MB
- Stars: 1,357
- Watchers: 277
- Forks: 67
- Open Issues: 73
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bundle-size - Import Cost - Displays the import size of the package you are importing inside the code editor. (Tools to analyze the cost of imports / Webpack)
README
# Import Cost  [](https://www.wix.com/stands-with-ukraine)
[](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) [](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
This extension will display inline in the editor the size of the imported package.
The extension utilizes webpack in order to detect the imported size.
This project includes implementation of:
* Import Cost [VSCode extension](packages/vscode-import-cost) - install it from [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
* Import Cost [Node module](packages/import-cost) - use freely to implement extensions for other IDE (or contribute them to this repository)
Enjoy!
#### Third-Party Editor Plugin Links
* [Jetbrains IDE Plugin](https://github.com/denofevil/import-cost)
* [Atom Package](https://atom.io/packages/import-cost-atom)
* [Vim Plugin](https://github.com/wix/import-cost/tree/master/packages/coc-import-cost) ([coc.nvim](https://github.com/neoclide/coc.nvim) extension)
* [Vim Plugin](https://github.com/yardnsm/vim-import-cost)
## Why & How
We detail the why and how in this blog post:
https://citw.dev/posts/import-cost
## Developer guidelines
In this project we use [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) for managing the multiple packages.
### Getting started
In order to start working all you need to do is:
```sh
$ git clone [email protected]:wix/import-cost.git
$ npm install
$ code packages/import-cost
$ code packages/vscode-import-cost
```
Once VSCode workspaces are open:
* Hit `F5` to run tests in `import-cost`
* Hit `F5` to run the `vscode-import-cost` extension in debug mode
### Applying changes
Thanks to npm workspaces, 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:
```sh
$ ls -la packages/vscode-import-cost/node_modules | grep import-cost
lrwxr-xr-x 1 shahar 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 npm will sort it out:
```sh
$ 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:
```sh
$ 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:
```sh
$ 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):
```sh
$ cd packages/vscode-import-cost
$ npm version patch | minor | major
$ git commit -a -m "releasing version X.X.X"
$ git push
$ vsce publish
```
Don't forget to update README.md with details of what is new in the released version...