bundle-analyzer

Analyze JavaScript bundle size and suggest optimizations for web applications.

91|44|Updated Jul 17, 2025

Search Tags:#performance #web development #optimization #bundle size #tree shaking #webpack #vite

One-click install

npx skills add https://github.com/HyperscapeAI/hyperscape --skill bundle-analyzer-hyperscapeai

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: bundle-analyzer
Source: https://github.com/HyperscapeAI/hyperscape/tree/main/.claude/skills/bundle-analyzer
Command: npx skills add https://github.com/HyperscapeAI/hyperscape --skill bundle-analyzer-hyperscapeai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer, @next/bundle-analyzer, size-limit, @size-limit/preset-app, and includes scripts (resource) components.

What problem does it solve?

This Skill tackles slow page load times and bloated JavaScript bundles by automatically analyzing dependencies, identifying optimization opportunities, and suggesting concrete strategies. It helps developers reduce bundle sizes, leading to faster, more efficient web applications and improved user experience.

Core Features & Use Cases

Bundle Size Analysis: Detects large dependencies, duplicate packages, and unused code across various bundlers (Webpack, Vite, Rollup, Next.js, CRA).
Optimization Strategies: Recommends and provides code examples for tree shaking, code splitting, lazy loading, image optimization, and more.
Use Case: If your web application's initial load time is too high, activate this Skill to "analyze my bundle size." It will identify the largest culprits, suggest specific code changes (e.g., replacing Moment.js with Date-fns), and even integrate checks into your CI/CD pipeline to prevent future regressions.

Quick Start

Analyze my JavaScript bundle size and suggest optimizations for my Next.js application.