Corta el tiempo de carga de tus apps React de 15s a 1s

Cargar toda la aplicación React de golpe ralentiza el tiempo de carga inicial.

El truco

// ANTES
import Home from './components/Home';
import About from './components/About';

// DESPUÉS
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

// En tu función principal
<React.Suspense fallback={<div>Cargando...</div>}>
  <Home />
  <About />
</React.Suspense>

Usa React.lazy() para dividir los componentes en chunks que se cargan bajo demanda. React.Suspense gestiona qué mostrar mientras se carga un componente. Añade prefetch en el HTML para mejorar aún más el rendimiento:

<link rel="prefetch" href="./components/Home.js" />
<link rel="prefetch" href="./components/About.js" />

React.lazy() con React.Suspense carga los componentes solo cuando son necesarios, reduciendo el peso inicial de la app. Prefetch permite al navegador descargar archivos cuando está ocioso, acelerando su disponibilidad sin bloquear la carga inicial.

Reducir el tamaño inicial de la carga es clave para mejorar la experiencia de usuario. Implementa lazy loading y prefetching para que tus apps React vuelen.