División por rutas y por componentes
Divida por ruta (a nivel de pantalla) y dentro de las pantallas (a nivel de widget). Use Suspense cerca del área lenta para que el resto siga siendo interactivo.
División por rutas y por componentes es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Dos niveles: ruta y widget
Objetivo: divida las rutas (pantallas completas) y los widgets (partes pesadas dentro de una pantalla). Mantenga los fallbacks locales para que la página siga siendo utilizable.
Dónde dividir y por qué
- Basada en rutas: divida las páginas grandes
- A nivel de componente: divida gráficos y editores
- Coloque Suspense justo al lado del área lenta
Demostración: división al estilo de una ruta
Basada en rutas: solo la pestaña Reports se carga de forma diferida; las demás pestañas se renderizan inmediatamente.
<div id="root"></div>
Demostración: división a nivel de widget
A nivel de componente: cargue de forma diferida un widget Chart pesado; la estructura de la página se renderiza inmediatamente.
<div id="root"></div>
Demostración: precarga al pasar el cursor
Precarga según la intención: comience a cargar cuando el usuario pase el cursor sobre el botón para que el clic parezca instantáneo.
<div id="root"></div>
Consejos y errores comunes
- Evite un único límite enorme; manténgalo local
- Haga coincidir el tamaño del fallback con el de la UI final
- Divida según los flujos del usuario (rutas) y los widgets pesados, no según cada componente pequeño
Comprobación de la estrategia de división
Repaso
Repaso: divida las pantallas grandes (rutas) y los widgets pesados. Envuelva cada área lenta en su propio Suspense con un fallback pequeño; precargue según la intención para que los clics sean más rápidos.
Preguntas frecuentes
¿La lección «División por rutas y por componentes» es gratis?
Sí — el texto completo de «División por rutas y por componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «División por rutas y por componentes»?
Divida por ruta (a nivel de pantalla) y dentro de las pantallas (a nivel de widget). Use Suspense cerca del área lenta para que el resto siga siendo interactivo. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «División por rutas y por componentes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- React.lazy y Suspense — componentes bajo demanda
- División por rutas y por componentes
- Bundles, caché e indicaciones de precarga