bundle-analyze

Analyze JavaScript bundle sizes for Webpack, Vite, esbuild, and Rollup projects.

1|Updated Jan 26, 2026

Search Tags:#performance #optimization #javascript #bundle analysis #webpack #code splitting #vite

Ready to run

npx skills add https://github.com/manastalukdar/claude-devstudio --skill bundle-analyze

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bundle-analyze
Source: https://github.com/manastalukdar/claude-devstudio/tree/main/skills/bundle-analyze
Command: npx skills add https://github.com/manastalukdar/claude-devstudio --skill bundle-analyze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers identify and reduce the size of their JavaScript bundles, leading to faster load times and improved performance.

Core Features & Use Cases

Bundle Analysis: Analyzes Webpack, Vite, esbuild, and Rollup bundles to pinpoint large dependencies and code inefficiencies.
Optimization Recommendations: Suggests strategies for tree-shaking, code splitting, and dependency management.
Use Case: A developer notices their web application is loading slowly. They use this Skill to analyze the main JavaScript bundle, discover that a single large library is responsible for 70% of the size, and receive actionable advice on how to replace it with a smaller alternative or split it into a separate chunk.

Quick Start

Analyze the current project's JavaScript bundle size and get optimization suggestions.

Frequently Asked Questions about bundle-analyze

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

FAQPage Schema

How do I analyze JavaScript bundle size in a Webpack or Vite project?▼

Bundle analysis inspects Webpack, Vite, esbuild, and Rollup builds to pinpoint large dependencies and code inefficiencies. It reviews your compiled output to identify exactly which modules consume the most space and slow down load times.

How do I reduce large JavaScript dependencies in a React or Vue app?▼

To reduce large JavaScript dependencies, you can use tree-shaking, code splitting, and dependency replacement strategies. This Skill identifies bulky libraries in frameworks like React and Vue and recommends smaller alternatives or lazy loading to improve performance.

Does bundle analysis support Next.js and Angular projects?▼

Bundle analysis supports Next.js and Angular projects, along with React and Vue. It works across multiple build tools including Webpack, Vite, esbuild, and Rollup to evaluate your application's compiled JavaScript output.

What is the best way to identify tree-shaking opportunities in an esbuild bundle?▼

Identifying tree-shaking opportunities in an esbuild bundle involves analyzing the compiled output for unused exports and dead code. This Skill scans your bundle to locate these inefficiencies and suggests targeted tree-shaking strategies to eliminate them.

When should I use code splitting to optimize my JavaScript bundle?▼

You should use code splitting to optimize your JavaScript bundle when a single large library dominates the file size. This Skill detects these heavy modules and recommends splitting them into separate chunks or dynamically importing them to improve load times.