import-cost

displays the import size of the package you are importing inside the code editor

Github星跟蹤圖

Import Cost Build Status Build status

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.
Example Image

This project includes implementation of:

Enjoy!

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 F5 to run tests in import-cost
  • Hit F5 to run the vscode-import-cost extension 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...

主要指標

概覽
名稱與所有者wix/import-cost
主編程語言JavaScript
編程語言TypeScript (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2017-07-15 16:50:35
推送於2024-03-24 02:56:29
最后一次提交2022-09-18 04:53:47
發布數0
用户参与
星數1.4k
關注者數250
派生數70
提交數346
已啟用問題?
問題數262
打開的問題數65
拉請求數36
打開的拉請求數14
關閉的拉請求數28
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?