Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Import CostNew to Visual Studio Code? Get it now.

Import Cost

Wix

|
916,811 installs
| (38) | Free
Display import/require package size in the editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Import Cost VSCode Extension 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

Features

Calculates the size of imports and requires. Currently supports:

  • Default importing: import Func from 'utils';
  • Entire content importing: import * as Utils from 'utils';
  • Selective importing: import {Func} from 'utils';
  • Selective importing with alias: import {orig as alias} from 'utils';
  • Submodule importing: import Func from 'utils/Func';
  • Require: const Func = require('utils').Func;
  • Supports both Javascript and Typescript

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

Configuration

The following properties are configurable:

  // Upper size limit, in KB, that will count a package as a small package
  "importCost.smallPackageSize": 50,

  // Upper size limit, in KB, that will count a package as a medium package
  "importCost.mediumPackageSize": 100,

  // Decoration color for small packages
  "importCost.smallPackageColor": "#7cc36e",

  // Decoration color for medium packages
  "importCost.mediumPackageColor": "#7cc36e",

  // Decoration color for large packages
  "importCost.largePackageColor": "#d44e40",

  // File extensions to be parsed by the Typescript parser
  "importCost.typescriptExtensions": [
    "\\.tsx?$"
  ],

  // File extensions to be parsed by the Javascript parser
  "importCost.javascriptExtensions": [
    "\\.jsx?$"
  ],

  // Which bundle size to display
  "importCost.bundleSizeDecoration": "both",

  // Display the 'calculating' decoration
  "importCost.showCalculatingDecoration": true,

  // Print debug messages in output channel
  "importCost.debug": false

Any package size above the mediumPackageSize limit will be considered large.

Known Issues

  • Importing two libraries with a common dependency will show the size of both libraries isolated from each other, even if the common library needs to be imported only once.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft