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
Powered by bundlephobia.com with local 1-hour cache

Pro — marketplace.dashovia.com

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

Commands

Command	Description	Tier
`BundleWatch: Analyze Current File`	Full breakdown of all imports	Free
`BundleWatch: Toggle Inline Display`	Show/hide inline cost annotations	Free
`BundleWatch: Show Bundle Budget Report`	Project-wide cost breakdown	Pro
`BundleWatch: Find Lighter Alternatives`	Suggest smaller packages	Pro

Configuration

Setting	Default	Description
`bundlewatch.enabled`	`true`	Enable/disable inline display
`bundlewatch.warnThresholdKB`	`50`	KB threshold for yellow warning
`bundlewatch.budgetKB`	`0`	Total bundle budget (Pro, 0 = disabled)

Pro License

Get a Pro license at marketplace.dashovia.com/extensions/bundle-watch

Open VSCode Settings → search bundlewatch.licenseKey
Paste your license key → Pro activates instantly on up to 3 devices

Known Alternatives Detected

BundleWatch Pro recognizes these common heavy packages and suggests alternatives:

moment → date-fns / dayjs · lodash → radash · axios → ky / fetch · uuid → nanoid · classnames → clsx · chalk → picocolors · react-icons → lucide-react