bundle-analyzer_skill

Overview

This skill analyzes JavaScript bundle sizes, pinpoints large or duplicate dependencies, and recommends concrete optimizations for webpack, Vite, and Rollup projects. It helps teams reduce initial load, improve Time to Interactive, and integrate bundle checks into CI. Ideal for TypeScript and React-based projects where build size impacts performance.

How this skill works

The skill detects the build tool by scanning package.json and common config files, then suggests and configures the appropriate analyzer (webpack-bundle-analyzer, rollup-plugin-visualizer, or source-map-explorer). It generates treemap reports and gzipped size breakdowns, highlights top contributors to bundle weight, and produces a prioritized action list with estimated savings. It can also recommend build-time changes like manual chunks, externals, and compression plugins, plus CI checks to enforce budgets.

When to use it

• After a release when load times regress or bundle grows unexpectedly
• When you ask: "analyze bundle", "optimize bundle size", or "reduce bundle"
• Before shipping to production to enforce size budgets in CI
• When onboarding a repo to identify duplicate or heavy dependencies
• When implementing route-based code splitting or lazy loading

Best practices

• Run bundle analysis on major releases and include it in CI to catch regressions
• Prefer granular imports (lodash/debounce) or lodash-es for tree-shaking
• Use dynamic imports and manualChunks to split vendor code from app code
• Replace heavy libraries (moment, large chart libs) with lighter alternatives
• Compress assets (gzip/brotli), remove dev-only code, and purge unused CSS

Example use cases

• Add webpack-bundle-analyzer to a webpack config and generate a static treemap report
• Configure Vite with rollup-plugin-visualizer and manualChunks for React and utilities
• Use source-map-explorer on a CRA build to find duplicate lodash and large assets
• Set size-limit in package.json and fail CI on pull requests that exceed budgets
• Create an action plan from the report: replace moment, lazy-load chart library, remove unused CSS