Is this compatible with the latest version of React?

Yes, it specifically includes React 19 patterns such as the use() hook for promise unwrapping and updated Suspense boundary strategies.

Does it include bundle analysis tools?

Yes, the skill provides configurations for vite-plugin-visualizer to help you identify large dependencies and optimize manual chunks effectively.

How does this skill improve Core Web Vitals?

It reduces Largest Contentful Paint (LCP) and Total Blocking Time (TBT) by deferring non-critical JavaScript, ensuring the browser processes essential content first.

When should I avoid using lazy loading?

Avoid lazy loading small components under 5KB where overhead exceeds savings, or critical above-the-fold content that would delay the initial page render.

Lazy Loading Patterns

Name: Lazy Loading Patterns
Author: yonatangross

byyonatangross

•

Herramientas de Diseño

Implements code splitting and lazy loading strategies to optimize React 19 bundle performance and Core Web Vitals.

This skill provides production-ready patterns for optimizing large-scale React 19 applications by deferring non-critical resource loading. It includes implementation guides for route-based splitting, granular component lazy loading using React.lazy and Suspense, intersection-based loading for below-the-fold content, and advanced prefetching techniques. By integrating these patterns, developers can significantly reduce initial load times, improve LCP scores, and manage complex bundle dependencies through Vite and Rollup configurations while avoiding common anti-patterns that degrade user experience.

Características Principales

01Vite and Rollup bundle analysis integration for manual chunk optimization

02Granular component splitting with React.lazy and Suspense boundaries

03Intersection Observer strategies for viewport-triggered content loading

0469 GitHub stars

05Route-based code splitting optimized for React Router 7.x

06Prefetching and preloading hints based on user hover and navigation intent

Casos de Uso

01Implementing progressive feature rollouts using conditional lazy loading

02Reducing the initial bundle size of feature-heavy Single Page Applications

03Lazy loading resource-intensive widgets like charts, editors, and data tables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit lazy-loading-patterns

For use in Claude.ai and ChatGPT

Download Skill