Reduce tiempos de carga en React de 15s a 1.1s sin usar Lazy Loading

El problema es que la aplicación React carga lentamente debido a la importación de componentes innecesarios de una sola vez.

El truco

Antes (mal):

import { ComponentA, ComponentB, ComponentC } from './components';

function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </div>
  );
}

Después (bien):

function App() {
  const ComponentA = React.lazy(() => import('./components/ComponentA'));
  const ComponentB = React.lazy(() => import('./components/ComponentB'));
  const ComponentC = React.lazy(() => import('./components/ComponentC'));

  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </React.Suspense>
    </div>
  );
}

Al descomponer los componentes en importaciones dinámicas con React.lazy, solo se cargan cuando se necesitan, mejorando drásticamente el tiempo de carga inicial. React.Suspense se utiliza para mostrar un fallback mientras los componentes asíncronos se cargan, haciendo que la experiencia del usuario sea fluida incluso si hay un pequeño retardo en la carga de cada componente.

Reducir el tiempo de carga de tu aplicación no siempre requiere soluciones complicadas. A veces, una sencilla optimización de importaciones puede marcar la diferencia.