bundle-analyze

Analyze frontend bundles to identify size growth and optimization opportunities.

11|Updated Apr 16, 2026

Search Tags:#performance #frontend #optimization #dependencies #bundle #code-splitting

Ready to run

npx skills add https://github.com/berkcangumusisik/claude-code-practices --skill bundle-analyze-berkcangumusisik

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill analyzes frontend bundle sizes and surfaces actionable optimizations to reduce payloads and improve load times.

Core Features & Use Cases

Bundle size analysis: Detects large modules and libraries contributing to bundle size.
Optimization recommendations: Suggests lighter alternatives, code-splitting opportunities, and lazy-loading where appropriate.
Use Case: When optimizing a Next.js or Vite project, run bundle-analyze to surface the top bundle contributors and recommended changes, then apply them to achieve smaller first-load times.

Quick Start

Run bundle-analyze on your project to generate a bundle report with heavy contributors and recommended optimizations.

Frequently Asked Questions about bundle-analyze

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

FAQPage Schema

How do I identify what is causing frontend bundle bloat?▼

To identify frontend bundle bloat, you can analyze your project to detect large modules and surface the top contributors. This process reports total bundle size and highlights heavy dependencies affecting your payload.

How do I optimize bundle size in a Next.js or Vite project?▼

You can optimize bundle size in Next.js or Vite by analyzing your build to find code-splitting and lazy-loading opportunities. This surfaces concrete optimization steps and suggests lighter alternatives for heavy dependencies.

Can I analyze bundle size for projects using Webpack?▼

Yes, you can analyze bundle size for projects using Webpack. The analysis applies to common frontend toolchains including Webpack, Next.js, and Vite, detecting size growth and optimization opportunities.

What is the best way to find code-splitting opportunities in a frontend bundle?▼

The best way to find code-splitting opportunities is to analyze the bundle for heavy contributors and potential lazy-loading points. This generates a report with recommended changes to achieve smaller first-load times.

Why does my frontend first-load time suffer from heavy dependencies?▼

Your frontend first-load time suffers because heavy dependencies increase the overall payload size. Analyzing the bundle identifies these large libraries and suggests lighter alternatives to reduce load times.