Bundle Size Plus

A VSCode extension that displays the bundle size of imported packages directly in your editor, with support for JavaScript, TypeScript, and Vue files.

Inspired by: This project is inspired by and extends the ideas from vscode-bundle-size, adding support for Vue single-file components.

Features

• Local Bundle Analysis (esbuild): Bundles packages locally (using your workspace esbuild), measuring minified + gzipped output based on the versions you actually have installed
• Peer-Dep Aware: Automatically externalizes peer dependencies (e.g. vue, react) so sizes reflect incremental package cost
• Inline Decorations + Hover: Shows sizes right next to import/export/require() lines, with hover details (resolved path / version / sizes)
• Import-Signature Aware: Measures what you import (default/named/namespace/side-effect) so tree-shaking can reflect smaller imports
• Vue Support: Parses <script> / <script setup> blocks (including lang="ts", lang="tsx", lang="jsx")
• Smart Workspace Imports: Analyzes local file dependencies recursively, calculates npm package sizes based on actual imports, and caches results for reuse
• Offline by Design: No external API calls; results are cached and computed lazily for visible imports

Supported File Types

• JavaScript (.js, .jsx)
• TypeScript (.ts, .tsx)
• Vue (.vue) - Parses <script> sections

Supported Syntax

• import ... from 'pkg', import * as ns from 'pkg', import { named } from 'pkg'
• import 'pkg' (side-effect imports)
• export * from 'pkg', export { named } from 'pkg'
• const x = require('pkg'), const { named } = require('pkg')

Usage

Open any supported file with imports; sizes appear at the end of the line. Hover the size label for details.

import React from 'react'; // 6.4KB (2.1KB zipped)
import lodash from 'lodash'; // 72.5KB (24.3KB zipped)

How It Works

The extension uses local bundling with esbuild to calculate package sizes:

1. Parse imports: Uses Babel parser to extract import statements from your code
2. Build entry: Creates a virtual entry file that imports only what you actually use
3. Bundle with esbuild: Uses your workspace's esbuild to bundle the entry
4. Measure output: Calculates minified and gzipped sizes of the bundled output
5. Cache results: Stores results in memory for fast subsequent lookups

Local Calculation Details

For npm packages, the extension:

• Creates an entry like export { cloneDeep } from 'lodash-es' based on your actual import
• Bundles it with esbuild (minified + tree-shaken)
• Measures the output size (minified and gzipped)
• Externalizes peer dependencies (e.g., vue, react) to show incremental cost

For workspace/local imports (in smart mode):

• Recursively analyzes the local file to find all dependencies
• Separates local files from npm packages
• Calculates local file sizes directly (raw + gzipped)
• Reuses cached npm package sizes from previous calculations
• Aggregates import specifiers across files (e.g., if utils.ts imports { cloneDeep } and helpers.ts imports { merge } from lodash-es, both are measured together)

Why Local Bundling?

Unlike extensions that rely on external APIs (like Bundlephobia), this extension:

• More Accurate: Uses your actual installed package versions
• Works Offline: No internet connection required
• Faster: No network latency after initial bundling
• Private: Your package usage data stays local
• Tree-Shaking Aware: Measures only what you import, not the entire package

Limitations of Local npm Bundling

While local bundling provides accurate results for most cases, there are some limitations:

1. No true tree-shaking analysis: The extension bundles your import statement in isolation. It cannot analyze how the bundled code will be used downstream, so dead code elimination within the imported module may not be fully reflected.

2. Side effects may be included: Packages with sideEffects: false in their package.json may still include side-effect code in the measurement, as esbuild bundles the entire module graph reachable from your import.

3. Different from production builds: Your actual production bundler (Webpack, Vite, Rollup) may produce different sizes due to:

   • Different minification algorithms
   • Different tree-shaking implementations
   • Scope hoisting and code splitting
   • Plugin-specific transformations

4. Subpath exports: For packages using exports field in package.json, the measured size may differ from what your bundler resolves, especially for complex export maps.

5. Peer dependencies: While peer deps are externalized, the boundary detection relies on peerDependencies in package.json. Implicit peer dependencies may not be detected.

6. Dynamic imports: import() expressions and require() with variables are not analyzed.

Configuration

You can customize the extension behavior through VSCode settings:

Commands

• bundleSizePlus.clearCache: Clear the in-memory bundle size cache
• bundleSizePlus.toggleInlayHints: Toggle the inline display on/off
• bundleSizePlus.showOutput: Open the extension output channel for debugging

Theme / Color

Hints are color-coded by size (≥100KB warning, ≥500KB heavy). Customize via these theme tokens:

• bundleSizePlus.inlayHint
• bundleSizePlus.inlayHintWarning
• bundleSizePlus.inlayHintHeavy

{
  "workbench.colorCustomizations": {
    "bundleSizePlus.inlayHint": "#00C853",
    "bundleSizePlus.inlayHintWarning": "#FFB300",
    "bundleSizePlus.inlayHintHeavy": "#FF5252"
  }
}

Requirements

• VSCode version 1.80.0 or higher
• Project with node_modules directory (packages must be installed)
• For bundle-size results, esbuild must be resolvable:
  • First from your project dependencies (recommended; Vite projects are usually fine even if esbuild is transitive)
  • Then from a global install (npm i -g esbuild)
  • If not found, check Output → Bundle Size Plus for the warning log, and the extension will fall back to resolved file sizes when possible
  • If you use pnpm and esbuild isn't resolvable, add it explicitly: pnpm add -D esbuild

Limitations

• Some packages may not be bundleable (e.g., packages with native dependencies)
• First-time bundling may take a moment for large packages
• Sizes are calculated with esbuild (browser/ESM, minified + tree-shaken) and may differ from your real build setup
• If esbuild is missing from the workspace, bundle sizes are unavailable and file-size fallbacks are used instead
• See Limitations of Local npm Bundling for detailed caveats

Installation

From VSCode Marketplace

1. Open VSCode
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Bundle Size Plus"
4. Click Install

Manual Installation

1. Download the .vsix file from the releases page
2. Open VSCode
3. Go to Extensions
4. Click the "..." menu and select "Install from VSIX..."
5. Select the downloaded file

Development

Setup

npm install

Build

npm run build

Watch Mode

npm run watch

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Enjoy coding with Bundle Size Plus!