Analyze frontend bundles and apply tree shaking, code splitting, and lazy loading.
npx skills add https://github.com/686f6c61/alfred-dev --skill bundle-size
Please help me install this Agent Skill. Skill: bundle-size Source: https://github.com/686f6c61/alfred-dev/tree/main/skills/rendimiento/bundle-size Command: npx skills add https://github.com/686f6c61/alfred-dev --skill bundle-size
This Skill addresses the critical issue of large frontend bundle sizes, which directly impact website loading times, user experience, and data consumption.
Analyze the current frontend bundle size and identify the largest components.
High-intent search queries and answers about installing and using this skill.
Tree shaking eliminates unused code from your bundle, code splitting divides your bundle into smaller chunks, and lazy loading defers loading non-critical components until needed, collectively reducing initial bundle size and improving load performance.
Bundle analysis works by visualizing the composition of your built JavaScript or CSS files, showing the relative size of each module and dependency, allowing you to pinpoint redundant libraries and large components causing bloat.
Beyond tree shaking and code splitting, you can reduce bundle size by replacing heavy libraries with lightweight alternatives, implementing lazy loading for non-critical components, and tracking bundle size changes before and after optimization to measure performance impact.
Bundle size optimization is generally safe, but limitations include potential race conditions from lazy loading, incomplete tree shaking with certain library patterns, and the need to ensure code splitting doesn't fragment shared dependencies excessively.
Prompt-or-Die-LabsAnalyze JavaScript bundle output to identify size-heavy dependencies and chunks.
Objective-ArtsOptimize JavaScript performance by applying code splitting, tree shaking, and image optimization.
hiddink-aiGenerate optimization reports analyzing bundle size, performance metrics, and code quality.
PatternsDevServer-render React components to reduce client-side JavaScript in Next.js App Router.
