Inline Dependency Size

See the actual bundle cost of every import — right in your editor.

Inline Dependency Size shows the gzipped size of npm packages next to your import and require() statements, so you can make informed decisions about what you ship.

Features

Inline Size Annotations

Every import gets an annotation showing its gzipped bundle size:

import axios from 'axios';          // ~14.2KB gzipped
import { debounce } from 'lodash';  // ~72.5KB gzipped
import dayjs from 'dayjs';          // ~2.9KB gzipped

Annotations are color-coded:

• Green — under 10KB (configurable)
• Yellow — 10–50KB (configurable)
• Red — over 50KB

Hover Cards

Hover over any import for a detailed breakdown:

• Package version
• Gzipped and minified sizes
• Dependency count
• Tree-shakeability indicator
• License info
• Last publish date
• Lighter alternative suggestions (e.g., moment -> date-fns)

Code Actions

Quick fixes appear as lightbulb actions on imports:

• Rewrite to deep import — import { debounce } from 'lodash' -> import debounce from 'lodash/debounce'
• Switch to alternative — replace a heavy package with a lighter one
• Convert to dynamic import — lazy-load large packages with import()

Show All Imports

Open the command palette and run Inline Dependency Size: Show All Imports to see a quick-pick list of every import in the current file with sizes and status.

Size Budgets

Set per-package size limits in your VS Code settings:

{
  "inlineDependencySize.budgets": [
    { "pattern": "lodash", "maxSize": 25 },
    { "pattern": "@mui/*", "maxSize": 100 }
  ]
}

Or create a .dependency-budgets.json file in your project root. Budget violations show as warnings in the Problems panel.

Status Bar

The status bar shows the total gzipped import cost for the active file, with a warning indicator when budget violations exist.

Premium Features

Unlock advanced analysis for a one-time $4.99 purchase via Gumroad.

Marginal Cost Analysis

See the actual bytes each import adds to your bundle — not generic package sizes. This uses esbuild to analyze your real dependency graph and shows the marginal cost of adding or removing each package.

import axios from 'axios';          // ~14.2KB gzipped  (+3.1KB in bundle)

Bundle Composition Treemap

Interactive SVG treemap showing your entire bundle broken down by package. Filter by direct dependencies, transitive dependencies, or first-party code. Click any block to see its dependency chain.

Project Scan

Scan your entire project to find:

• Top packages by bundle impact
• Quick wins — barrel imports that could be deep imports, packages with lighter alternatives
• Unused packages listed in package.json

Apply suggested fixes with one click.

Size History

Chart.js timeline showing how dependency sizes change across versions. Filter by package name and time range.

Export Size Badge

Generate a markdown badge and table for your README showing your project's dependency size profile.

Configuration

Commands

How It Works

1. Import detection — Uses es-module-lexer for accurate ESM parsing with regex fallback for CommonJS
2. Size resolution — Checks Bundlephobia API first, falls back to local esbuild analysis
3. Caching — Sizes are cached to disk for the configured TTL to avoid redundant lookups
4. Marginal cost — Uses esbuild metafile analysis to determine actual bytes contributed by each package in your bundle

Requirements

• VS Code 1.74.0 or later
• Node.js project with package.json and node_modules

License

MIT