WPT Inspector 📦

WPT Inspector is a Visual Studio Code extension for web developers who want to track the real bundle impact of their files without leaving the editor.

It estimates the production weight of each file and displays it inline, so you can catch bloated modules before they hit your users.

🚀 Installation

Search for WPT Inspector in the VSCode Extensions panel (Ctrl+Shift+X) and click Install, or get it directly from the VSCode Marketplace.

No configuration required — the extension activates automatically on startup.

✨ Features

Live Gutter Annotations

Open any supported file and you'll see its estimated bundle size at the end of the first line — no commands needed.

The annotation updates automatically a moment after you save.

Analysis Dashboard

Get a full breakdown of every file in your project sorted by bundle impact.

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run WPT Inspector: Analizar Proyecto para Rendimiento
Or press Ctrl+Alt+W / Cmd+Alt+W

The panel shows all scanned files with proportional size bars. Click any row to jump straight to that file. Use the search box at the top to filter files by name.

Framework-Aware Estimation

WPT Inspector applies different compression profiles depending on the file type, reflecting the typical tree-shaking and minification behavior of each framework:

Framework	Extensions
Astro	`.astro`
React / Next.js	`.jsx`, `.tsx`
Vue	`.vue`
Svelte	`.svelte`
TypeScript / JavaScript	`.ts`, `.tsx`, `.js`, `.jsx`

⚙️ Settings

All settings are available under Extensions → WPT Inspector in VSCode Settings (Ctrl+,).

Setting	Default	Description
`wptInspector.compressionRatio`	`0.35`	Global compression ratio used to estimate bundle size from source size.
`wptInspector.maxFiles`	`1000`	Maximum number of files to scan per analysis.
`wptInspector.enableGutterDecorations`	`true`	Show the estimated size inline in the editor.
`wptInspector.useFrameworkProfiles`	`true`	Use framework-specific ratios instead of the global ratio.

🛠️ Commands

Command	Shortcut
`WPT Inspector: Analizar Proyecto para Rendimiento`	`Ctrl+Alt+W` / `Cmd+Alt+W`

❤️ Support

If WPT Inspector saves you time, consider supporting its development.

💸 Donate via PayPal

WPT Inspector

PabloGonSan8