frontend-bundle-size

What problem does it solve?

This Skill helps developers reduce frontend bundle size and improve load and HMR performance by identifying heavy or unnecessary imports and recommending safer loading patterns.

Core Features & Use Cases

• Barrel import avoidance: prefer direct module imports to prevent pulling large re-exported libraries into client bundles.
• Dynamic loading & React.lazy: recommend moving heavy modules behind dynamic import() or React.lazy with Suspense and client-side guards to avoid SSR bundling.
• Intent-based preloading: suggest preloading on hover, focus, or feature-flag activation to improve perceived performance without inflating initial payloads.
• Use Case: optimize a React/Next.js app that currently imports large UI libraries like @mui/material or lucide-react to reduce dev boot time, build size, and cold starts.

Quick Start

Ask the skill to analyze a component or import graph and return actionable recommendations to replace barrel imports, add dynamic imports or React.lazy, and implement intent-based preloading.