See the gzipped bundle size of every npm import inline as you type. Set budget limits and catch bloat before it ships.
Why BundleWatch?
import-cost — the popular extension for this — is abandoned and broken on modern VSCode + TypeScript setups. BundleWatch is the maintained, faster replacement with Pro features built for teams.
Features
Free
Inline import cost — shows gzipped size next to every import and require statement
Color-coded warnings — green (ok) → yellow (warn) → red (large) based on configurable threshold
Tree-shaking awareness — distinguishes named imports from default imports
Bundle budget — set a total KB limit for your project; get warned when you exceed it
Budget report — full breakdown of every imported package's cost across the whole project
Find lighter alternatives — suggests known lighter packages for common heavy ones (moment → dayjs, lodash → radash, axios → ky, etc.)
Getting Started
Install the extension
Open any .js, .ts, .jsx, or .tsx file with npm imports
Import sizes appear automatically within 2 seconds
Example
import moment from 'moment' // 📦 72.1 kB gzipped ← red
import { format } from 'date-fns' // 📦 3.2 kB gzipped ← green
import axios from 'axios' // 📦 11.8 kB gzipped ← yellow
