Can it recommend alternatives to heavy libraries?

Yes, it identifies problematic dependencies like Moment.js or full Lodash builds and suggests tree-shakable alternatives like date-fns or lodash-es.

Does it integrate with my CI/CD pipeline?

Yes, it includes instructions for setting up size-limit and GitHub Actions to automatically monitor bundle growth in every pull request.

Can it help me improve my Google Lighthouse score?

Yes, by reducing bundle size and implementing code-splitting, it directly improves 'Total Blocking Time' and 'Largest Contentful Paint' metrics.

How does it identify duplicate dependencies?

It leverages tools like webpack-bundle-analyzer and source-map-explorer to visualize the dependency tree and spot multiple versions of the same package.

Which bundlers are supported by this skill?

The skill provides specialized configurations for Webpack, Vite, Rollup, Next.js, and Create React App (CRA).

Bundle Size Analyzer

Name: Bundle Size Analyzer
Author: Dexploarer

byDexploarer

•

分析与监控

Optimizes JavaScript application performance by identifying large dependencies and suggesting bundle size reduction strategies for modern build tools.

关于

Bundle Size Analyzer is a specialized capability for Claude Code designed to audit and improve web application performance. It automatically detects your build environment—whether it's Webpack, Vite, Rollup, or Next.js—and provides step-by-step instructions to visualize and reduce your bundle weight. By identifying bloated dependencies, duplicate packages, and tree-shaking failures, this skill helps developers implement advanced code-splitting patterns and size budgets to ensure fast, production-ready applications.

主要功能

CI/CD integration for automated bundle size budgeting
Multi-bundler support for Webpack, Vite, Rollup, and Next.js
Automated detection of bloated and duplicate dependencies
Step-by-step configuration for visual analysis tools
2 GitHub stars
Actionable optimization patterns like tree shaking and lazy loading

使用场景

Setting up performance monitoring and size limits in GitHub Actions
Reducing initial load times for slow React or Next.js applications
Migrating heavy legacy libraries to lightweight, modern alternatives

关于

主要功能

CI/CD integration for automated bundle size budgeting
Multi-bundler support for Webpack, Vite, Rollup, and Next.js
Automated detection of bloated and duplicate dependencies
Step-by-step configuration for visual analysis tools
2 GitHub stars
Actionable optimization patterns like tree shaking and lazy loading

使用场景

Setting up performance monitoring and size limits in GitHub Actions
Reducing initial load times for slow React or Next.js applications
Migrating heavy legacy libraries to lightweight, modern alternatives