En aplicaciones React grandes, es común que el tamaño del paquete JavaScript crezca significativamente, lo que puede afectar el rendimiento de la aplicación, especialmente en dispositivos con recursos limitados o conexiones lentas. La división de código (code splitting) y la carga perezosa (lazy loading) son técnicas que permiten optimizar el rendimiento al cargar solo el código necesario cuando se necesita.

1. División de Código (Code Splitting):

   • Permite dividir el código en "chunks" más pequeños que se cargan bajo demanda.
   • Mejora el tiempo de carga inicial de la aplicación.
   • Utiliza herramientas como Webpack para dividir el código automáticamente.

2. Carga Perezosa (Lazy Loading):

   • Retrasa la carga de un componente hasta que realmente se necesita.
   • Utiliza la función React.lazy y el componente Suspense para implementar la carga perezosa en React.

Si estás utilizando Create React App, Webpack ya está configurado para soportar la división de código. Sin embargo, si estás configurando Webpack manualmente, asegúrate de incluir la configuración para la división de código.

Vamos a ver cómo implementar la carga perezosa en una aplicación React.

1. Crear Componentes:

   Supongamos que tenemos dos componentes, Home y About.

   // Home.js
   import React from 'react';
   
   const Home = () => {
     return <h1>Home Page</h1>;
   };
   
   export default Home;
   

   // About.js
   import React from 'react';
   
   const About = () => {
     return <h1>About Page</h1>;
   };
   
   export default About;
   

2. Implementar Carga Perezosa:

   Utilizaremos React.lazy para cargar estos componentes de manera perezosa.

   // App.js
   import React, { Suspense, lazy } from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   
   const Home = lazy(() => import('./Home'));
   const About = lazy(() => import('./About'));
   
   const App = () => {
     return (
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
           </Switch>
         </Suspense>
       </Router>
     );
   };
   
   export default App;
   

   En este ejemplo:

   • React.lazy se utiliza para cargar los componentes Home y About de manera perezosa.
   • Suspense se utiliza para mostrar un indicador de carga (<div>Loading...</div>) mientras se carga el componente.

1. Crea una nueva aplicación React utilizando Create React App.
2. Crea dos componentes adicionales, Contact y Services.
3. Implementa la carga perezosa para estos componentes utilizando React.lazy y Suspense.
4. Configura las rutas para estos componentes utilizando React Router.

1. Crear la aplicación:

   npx create-react-app my-app
   cd my-app
   

2. Crear los componentes:

   // Contact.js
   import React from 'react';
   
   const Contact = () => {
     return <h1>Contact Page</h1>;
   };
   
   export default Contact;
   

   // Services.js
   import React from 'react';
   
   const Services = () => {
     return <h1>Services Page</h1>;
   };
   
   export default Services;
   

3. Implementar la carga perezosa:

   // App.js
   import React, { Suspense, lazy } from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   
   const Home = lazy(() => import('./Home'));
   const About = lazy(() => import('./About'));
   const Contact = lazy(() => import('./Contact'));
   const Services = lazy(() => import('./Services'));
   
   const App = () => {
     return (
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
             <Route path="/contact" component={Contact} />
             <Route path="/services" component={Services} />
           </Switch>
         </Suspense>
       </Router>
     );
   };
   
   export default App;
   

En esta sección, hemos aprendido sobre la división de código y la carga perezosa en React. Estas técnicas son esenciales para optimizar el rendimiento de aplicaciones grandes al cargar solo el código necesario cuando se necesita. Hemos visto cómo configurar Webpack para la división de código y cómo utilizar React.lazy y Suspense para implementar la carga perezosa en una aplicación React.

En el próximo módulo, exploraremos técnicas avanzadas de optimización del rendimiento en React, incluyendo la memorización y el uso de hooks como useMemo y useCallback.