lazy-load

What problem does it solve?

This Skill addresses slow initial page load times and large bundle sizes by implementing efficient lazy loading patterns for images, components, and routes.

Core Features & Use Cases

• Image Lazy Loading: Implements Intersection Observer and native loading="lazy" for images.
• Component Lazy Loading: Utilizes framework-specific dynamic imports (e.g., React.lazy, next/dynamic, Vue's defineAsyncComponent) for components.
• Route-based Code Splitting: Optimizes application load times by splitting code across different routes.
• Framework Support: Works with React, Vue, Next.js, Angular, Svelte, and Vanilla JavaScript.
• Use Case: Improve user experience on a large e-commerce site by ensuring that product images and complex UI components only load when they are about to enter the viewport or be interacted with.

Quick Start

Implement lazy loading for all images and components in your React project.