Carga diferida de módulos
Mejore el rendimiento de la aplicación mediante módulos con carga diferida.
Carga diferida de módulos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 3 lecciones en total.
Carga de módulos bajo demanda
Carga diferida de módulos
La carga diferida mejora el rendimiento al cargar los módulos solo cuando se necesitan. Exploremos esta importante función de Angular.
¿Qué es la carga diferida?
¿Qué es la carga diferida?
La carga diferida consiste en cargar módulos de forma asíncrona cuando un usuario navega a una ruta concreta, en lugar de cargar todos los módulos al iniciar la aplicación.
¿Por qué usar la carga diferida?
¿Por qué usar la carga diferida?
- Reduce el tiempo de carga inicial
- Mejora el rendimiento
- Optimiza el uso de recursos
Creación de un módulo cargado de forma diferida
Creación de un módulo cargado de forma diferida
Cree un módulo de funcionalidad para cargarlo de forma diferida con Angular CLI:
ng generate module admin --route admin --module app.moduleConfiguración de rutas diferidas
Configuración de rutas diferidas
Configure la carga diferida en su módulo de enrutamiento:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }Prueba de la carga diferida
Prueba de la carga diferida
Use las herramientas para desarrolladores para confirmar que los módulos solo se cargan cuando se activan las rutas. Verá que se cargan dinámicamente nuevos archivos JS.
Estrategias de precarga
Estrategias de precarga
Angular permite precargar módulos cargados de forma diferida para mejorar aún más la velocidad de navegación. Algunas estrategias habituales son:
- Sin precarga (opción predeterminada)
- Precargar todos los módulos
Prácticas recomendadas para la carga diferida
Prácticas recomendadas para la carga diferida
Use la carga diferida para los módulos que no sean necesarios inmediatamente al iniciar la aplicación, como los paneles de administración o las páginas de configuración.
Resumen
Resumen
Ha aprendido correctamente a implementar la carga diferida para mejorar el rendimiento de su aplicación Angular. ¡Excelente trabajo!
Preguntas frecuentes
¿La lección «Carga diferida de módulos» es gratis?
Sí — el texto completo de «Carga diferida de módulos» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Carga diferida de módulos»?
Mejore el rendimiento de la aplicación mediante módulos con carga diferida. Practicas Angular 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 Angular Academy?
No se requiere experiencia previa. Angular 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 3 de 3.
¿Cuánto tiempo toma la lección «Carga diferida de módulos»?
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 Angular Academy?
Sí. Cada lección de Angular 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
- Configuración de rutas
- Guards de rutas
- Carga diferida de módulos