bundle-analyzer

Bundle analysis identifies large dependencies, duplicate packages, and code-splitting opportunities by generating visualizations and reports. Tools like webpack-bundle-analyzer, rollup-plugin-visualizer, and source-map-explorer break down bundle composition across Webpack, Vite, Rollup, Next.js, and Create React App projects to pinpoint what's consuming space.

Yes. This Skill supports multi-bundler analysis across Next.js (@next/bundle-analyzer), Webpack (webpack-bundle-analyzer), Vite, Rollup (rollup-plugin-visualizer), and Create React App. It detects your build tool, installs appropriate analyzers, and generates size reports specific to your project setup.

Bundle analysis reveals optimization strategies: code splitting isolates unused code, tree-shaking removes dead imports, and compression (via compression-webpack-plugin) reduces file size. Identifying large dependencies lets you replace heavy libraries or load them conditionally.

Bundle analysis tools generate treemap visualizations and detailed reports showing duplicate dependencies and unused modules. size-limit and @size-limit/preset-app track bundle growth over time, while source-map-explorer maps code to source files to expose dead code and redundant imports.

Yes. Beyond JavaScript analysis, CSS optimization is supported via @fullhuman/postcss-purgecss, which removes unused CSS rules. Combined with JavaScript bundle analysis, this provides comprehensive optimization coverage for both assets.

Analysis reveals what's actually slowing load times—large dependencies, duplicates, or unoptimized code splitting patterns. Without visibility, optimization efforts are guesswork. Reports pinpoint exact problems, making optimization targeted and measurable.