bundle-analyze

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.

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.

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.

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.

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.