bundle-analyzer

Analyze JavaScript and Blazor WebAssembly bundle sizes for bloat and budget violations.

3|2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/robotijn/ctoc --skill bundle-analyzer-robotijn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bundle-analyzer
Source: https://github.com/robotijn/ctoc/tree/main/skills/frontend/bundle-analyzer
Command: npx skills add https://github.com/robotijn/ctoc --skill bundle-analyzer-robotijn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Oversized JavaScript bundles slow down page loads, hurt conversion rates, and degrade user experience, but manually identifying bloat, missing code splits, and budget regressions is time-consuming and error-prone. This Skill automates bundle analysis to catch these issues before they reach production.

Core Features & Use Cases

  • Performance Budget Enforcement: Configures per-route and global bundle size budgets that block PRs when exceeded, preventing regressions from shipping.
  • Bloat Detection: Identifies full-library imports, missing lazy loading, CommonJS contamination that breaks tree-shaking, and unused dependencies that inflate bundle size.
  • Multi-Bundler Support: Works with Next.js, Vite, Webpack, Rollup, esbuild, Bun, and Blazor WebAssembly, using native analysis tools for each ecosystem.
  • Use Case: For a SaaS app with a 200KB gzipped initial JS budget, this Skill catches a 240KB landing route bundle caused by an un-split admin panel and a full lodash import, providing exact fixes and estimated 190KB in savings.

Quick Start

Use the bundle-analyzer skill to audit your application's JavaScript bundles, identify performance bottlenecks and budget regressions, and receive prioritized, actionable fixes to meet your performance targets.

Frequently Asked Questions about bundle-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce a JavaScript bundle size budget and block pull requests that exceed it?

To identify JavaScript bundle bloat, analyze bundle contents to detect full-library imports, missing lazy loading, and CommonJS contamination that breaks tree shaking. This process highlights unused dependencies and provides exact fixes with estimated byte savings.

Does bundle analysis work with Vite and Next.js, or only Webpack?

Bundle analysis works with Vite, Next.js, Webpack, Rollup, esbuild, Bun, and Blazor WebAssembly. It uses native analysis tools specific to each bundler ecosystem to audit route-level code splitting and bundle sizes.

Why does tree shaking fail and cause oversized bundles in a frontend application?

Tree shaking fails and causes oversized bundles when CommonJS contamination prevents dead code elimination, or when full-library imports include unused modules. Analyzing the bundle identifies these specific failures and recommends code splitting fixes.

How do I validate route-level code splitting for a SaaS application before deployment?

To validate route-level code splitting, analyze your application bundles to ensure each route loads only its required JavaScript. The analysis identifies un-split panels and provides exact fix recommendations with estimated byte savings to meet performance budgets.

Can I analyze Blazor WebAssembly bundle sizes and detect missing lazy loading?

Yes, you can analyze Blazor WebAssembly bundle sizes to detect bloat and missing lazy loading. The analysis integrates with native tools to identify unused dependencies and enforce performance budgets for the WebAssembly ecosystem.