skills.rest
jholhewres
jholhewresCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

3|Updated Feb 13, 2026
Search Tags:#performance#optimization#javascript#webpack#vite#bundler
One-click install
npx skills add https://github.com/jholhewres/devclaw-skills --skill bundler-analyze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bundler-analyze
Source: https://github.com/jholhewres/devclaw-skills/tree/main/skills/bundler-analyze
Command: npx skills add https://github.com/jholhewres/devclaw-skills --skill bundler-analyze

SYSTEM DOCUMENTATION & REQUIREMENTS

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 web performance.

Core Features & Use Cases

  • Bundle Size Analysis: Visualize the composition of your JavaScript bundles using tools like Vite Bundle Visualizer and Webpack Bundle Analyzer.
  • Dependency Optimization: Quickly identify large dependencies that can be optimized or replaced.
  • Quick Size Checks: Get a rapid overview of build output sizes for JavaScript and CSS files.
  • Import Cost Estimation: Understand the size impact of individual modules.
  • Use Case: After building your frontend application, use this Skill to pinpoint which components or libraries are contributing the most to the final bundle size, allowing you to make informed decisions about optimization.

Quick Start

Run npx vite-bundle-visualizer to analyze your Vite project's bundle size.

Frequently Asked Questions about bundler-analyze

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

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

To analyze JavaScript bundle size, you run tools like vite-bundle-visualizer or webpack-bundle-analyzer via Node.js and npm. This process visualizes the bundle composition to help identify large dependencies and code-splitting opportunities.

What is the best way to identify large dependencies causing web performance issues?▼

The best way to identify large dependencies is by performing a bundle size analysis after building your frontend application. This visualizes which components or libraries contribute most to the final size, allowing you to make informed optimization decisions.

Do I need Node.js and npm to visualize my JavaScript bundle composition?▼

Yes, you need Node.js and npm installed to execute analysis tools like vite-bundle-visualizer and webpack-bundle-analyzer. These are required to run the commands that generate the bundle composition visualizations.

Can I estimate the size impact of individual modules in my web app build?▼

Yes, you can estimate the import cost and size impact of individual modules. The analysis provides a rapid overview of build output sizes for JavaScript and CSS files, helping you understand how much each module contributes to the total.

Does this bundle analysis approach work for both Vite and Webpack build tools?▼

Yes, this bundle analysis approach works for both Vite and Webpack build tools. It leverages specific visualizer tools for each environment to analyze JavaScript bundle sizes and pinpoint code-splitting opportunities.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

bundle-analyzer

Analyze JavaScript bundle sizes and propose code-splitting optimizations.

Community
Intermediate
hiddink-aihiddink-ai
1

optimize-bundle

Analyze build output and apply code splitting and tree-shaking optimizations.

Official
Intermediate
xiaoliwanshuixiaoliwanshui
21

flutter-reducing-app-size

Analyze Flutter build sizes and prune unused assets and libraries.

Community
Intermediate
mgd34msumgd34msu
4

webpack

Configures Webpack 5 for JavaScript/TypeScript bundling with modules, plugins, code splitting, and Module Federation.

Community
Advanced