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 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)
Nifty Data Viewer: CSV & Parquet Viewer with SQL: Open CSV, Parquet and JSON files as a fast table and query them with SQL, powered by DuckDB. Sort, page through millions of rows, and export to CSV, Parquet or JSON. (Open VSX)

See all 42 Nifty tools at https://getnifty.dev