Saltar al contenido

¿Cómo verificar si Angular Module Lazy Loading funciona en Chrome?

Este equipo de especialistas pasados muchos días de trabajo y recopilación de de información, han obtenido los datos necesarios, esperamos que todo este artículo sea de utilidad en tu plan.

De acuerdo a Guía de carga diferida de Angular:

Puede verificar que un módulo se esté cargando de forma diferida con las herramientas de desarrollo de Chrome. En Chrome, abra las herramientas de desarrollo presionando Cmd+Option+i en una Mac o Ctrl+Alt+i en una PC y vaya a la pestaña Red.

Una vez que realiza una acción que carga un módulo de forma perezosa, debería poder ver un Chunk que se carga en la pestaña Red. Algo como esto:

ingrese la descripción de la imagen aquí

NOTA: Otra verificación importante es asegurarse de que un módulo cargado con pereza no se vuelva a cargar. Para confirmar, muévase a una ruta diferente y luego haga clic en Acción nuevamente, y esta vez no hará una llamada de red para cargar el fragmento ya que ya se cargó.

Para asegurarse de que Lazy Loading esté funcionando. en cromo,

Paso 1 – abra las herramientas de desarrollo presionando F12 o Ctrl + Mayús + i

Paso 2 – haga clic en el Pestaña de red.

Cuando navegue a la URL diferida, debería ver un 0.chunk.js archivo renderizado.

ingrese la descripción de la imagen aquí

además de las otras respuestas que son correctas, puede usar la herramienta Augury para determinar qué módulo y componente se cargó con pereza, Angular Augury es una extensión de Chrome y Firefox Dev Tools para depurar aplicaciones Angular.

  • después de instalarlo y ejecutar su aplicación angular, puede ir a sus herramientas de desarrollador y hacer clic en la pestaña Augurio, le mostrará el Árbol de componentes al principio de esta manera:

ingrese la descripción de la imagen aquí

  • luego haces clic en Árbol de enrutadores pestaña y esa es la parte interesante que le muestra qué módulo / componente se carga dinámicamente y cuál es cargado perezosamente de la siguiente manera:

ingrese la descripción de la imagen aquí

Augury también ayuda a los desarrolladores de Angular a visualizar la aplicación a través de árboles de componentes y herramientas de depuración visual. Los desarrolladores obtienen información inmediata sobre la estructura de su aplicación, la detección de cambios y las características de rendimiento.

Si posees algún incógnita o capacidad de aumentar nuestro post puedes añadir una explicación y con gusto lo interpretaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *