Aquí hay una guía paso a paso para implementar la carga diferida y la división de código en un proyecto de React. Crearemos una aplicación simple con dos rutas, cargando componentes de forma perezosa.

Paso 1: crea una nueva aplicación React

Si aún no lo has hecho, crea una nueva aplicación React usando Crear aplicación React:

npx create-react-app lazy-loading-example
cd lazy-loading-example

Paso 2: Instale el enrutador React

Instalar reaccionar-router-dom para enrutamiento:

npm install react-router-dom

Paso 3: configurar la carga diferida y la división de código

Crear componentes

1. Cree una carpeta llamada componentes dentro del directorio src.
2. Dentro de los componentes, crea dos archivos: Home.js y About.js.

Inicio.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

Acerca de.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

Actualizar App.js

Ahora, modifique su archivo App.js para implementar la carga diferida y el enrutamiento:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    Loading...}>
        
  );
}

export default App;

Paso 4: ejecute su aplicación

Ahora, ejecuta tu aplicación para verla en acción:

npm start

Paso 5: Pruebe la carga diferida

1. Abre tu navegador y navega hasta http://localhost:3000.
2. Haga clic en el enlace "Inicio" para ver la carga del componente Inicio.
3. Haga clic en el enlace "Acerca de" para ver cómo el componente Acerca de se carga lentamente.

Puntos clave

• React.lazy se utiliza para importar dinámicamente componentes, que se cargan solo cuando se renderizan.
• Suspense se utiliza para manejar el estado de carga, mostrando un respaldo mientras se recupera el componente cargado de forma diferida.
• Este enfoque reduce significativamente el tiempo de carga inicial al dividir el código en fragmentos más pequeños.

Mejoras adicionales

Puedes mejorar aún más tu configuración:

• Implementar límites de error alrededor de los componentes cargados de forma diferida para detectar errores de carga.
• Usar estrategias de enrutamiento avanzadas con React Router para aplicaciones más grandes.

Si necesitas funciones más específicas o ayuda adicional, ¡avísame!