Nifty Import Cost

See the bundle size of every import inline, fast and cached, without maxing out your CPU.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

Features

Typing a lodash-es import and its size appearing next to it, then hovering the Chart.js size for details

Exact, tree-shaken sizes next to each import in a React component

Hovering a size shows the version, minified and gzipped sizes and how it was measured

Sizes right next to your imports.

import { debounce } from "lodash-es";   4.2 kB (gzip 1.8 kB)
import * as icons from "big-icons";      412.0 kB (gzip 98.3 kB)

Labels are green, yellow or red depending on size, so heavy imports stand out.

Exact, tree-shaken numbers. When your project has esbuild installed (most Vite, Astro and Remix projects do), Nifty Import Cost bundles just what you import, with tree-shaking, minification and gzip, using your own esbuild. import { debounce } counts debounce, not the whole library.
Estimates when esbuild isn't there, marked with ≈ so you know. Install esbuild (npm i -D esbuild) to switch to exact sizes.
Easy on your CPU. Only files you can see are measured, one import at a time, and every result is cached per package version, even across restarts. A typical measurement takes a few milliseconds.
Hover for details: package version, minified and gzipped sizes, and how it was measured.
Copy Import Size Report gives a Markdown table of every import in the file, handy for PR descriptions.
Works in JavaScript, TypeScript, JSX/TSX, Vue, Svelte and Astro files, including require() and dynamic import().

Command	What it does
`Nifty Import Cost: Toggle Import Sizes`	Turn the labels on or off
`Nifty Import Cost: Copy Import Size Report for This File`	Copy a Markdown table of all imports
`Nifty Import Cost: Clear Size Cache`	Measure everything again

Setting	Default	What it does
`nifty.import-cost.enabled`	`true`	Show import sizes
`nifty.import-cost.display`	`both`	`both`, `gzip` or `minified`
`nifty.import-cost.mediumThreshold`	`10000`	Gzipped bytes that turn a label yellow
`nifty.import-cost.largeThreshold`	`50000`	Gzipped bytes that turn a label red
`nifty.import-cost.useProjectEsbuild`	`true`	Use your project's esbuild for exact sizes
`nifty.import-cost.showNotInstalled`	`false`	Label imports of packages that aren't installed

Theme colours: niftyImportCost.small, niftyImportCost.medium, niftyImportCost.large, niftyImportCost.pending.

VS Code: search for "Nifty Import Cost" in the Extensions view, or install from the Visual Studio Marketplace.
Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

This extension collects no telemetry, needs no account and makes no network requests. Sizes are calculated locally from your node_modules.

Nifty Code Runner: Run Code in 25+ Languages: Run the current file or selection in 25+ languages in the terminal, with input support, your own commands and no telemetry. (Open VSX)
Nifty JS Tests: Mocha, node:test & Bun in Test Explorer: Run and debug Mocha, node:test and Bun tests from the Test Explorer: real diffs, stack locations, watch mode, TypeScript loaders and monorepos. No Jest or Vitest. (Open VSX)
Nifty JSON: Formatter, Validator & JSONPath: Format, minify, sort keys, query with JSONPath, copy paths, generate TypeScript types, and browse huge JSON files in a fast tree view. (Open VSX)
Nifty Monitor: CPU & Memory in the Status Bar: CPU, memory and disk usage in the status bar, including on remote SSH machines and dev containers. (Open VSX)
Nifty Tags: Auto Rename & Auto Close Tags: Rename paired tags as you type and close tags automatically, in JSX, TSX, Vue, Svelte, Astro, XML, PHP and template files, using the editor's built-in linked editing. (Open VSX)
Nifty Code Metrics: Complexity & Hotspots: Complexity and size for every function in any language, as CodeLens and warnings, plus a hotspots view of the complex files that change most often. (Open VSX)

See all 100+ Nifty extensions and web tools at https://getnifty.dev