No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Precarga de m贸dulos

16/25
Recursos

Modularizar una aplicaci贸n nos beneficia en rendimiento gracias a las t茅cnicas de Lazy Loading y CodeSplitting pero鈥 驴Funciona realmente? 驴El rendimiento de mi app ser谩 el 贸ptimo?

Diferencias entre hacer CodeSplitting y sin CodeSplitting

Al realizar un ng serve, SIN CodeSplitting, puedes observar en la consola algo como lo siguiente:

Build app sin CodeSplitting.png

Mientras que al realizarlo luego de haber modularizado la app se observa lo siguiente:

Build app con CodeSplitting.png

En la primera imagen, toda tu aplicaci贸n se agrupa en el main.js y en la segunda, luego de modularizar, se crea un 鈥淐hunk鈥 por cada m贸dulo que tenga la app.

Hasta aqu铆 ya puedes observar la diferencia en el tama帽o de los archivos. Si bien estamos compilando la aplicaci贸n en modo desarrollo. En modo producci贸n se comprime a煤n m谩s y pesar谩n menos los archivos.

Diferencias entre hacer Lazy Loading y sin Lazy Loading

Al ingresar a tu aplicaci贸n desde el navegador, utiliza las herramientas de desarrollo que proveen para inspeccionar la red.

Sin Lazy Loading, solo se puede observar el archivo main.js que contiene toda tu aplicaci贸n.

App sin Lazy Loading.png

Con Lazy Loading, puedes observar que se desprende un nuevo archivo llamado src_app_modules_website_website_module_ts.js el cual contiene el m贸dulo Website.

App con Lazy Loading 1.png

Te preguntar谩s, 驴d贸nde est谩n los archivos correspondientes a mis otros m贸dulos?
Redirecci贸nate a una ruta de tus otros m贸dulos para observar como se carga dinamicamente el archivo Javascript.

App sin Lazy Loading 2.png

Esa es la magia del Lazy Loading. Has logrado que tu aplicaci贸n cargue en N cantidad de partes, reduciendo el peso de la misma y mejorando su velocidad de renderizado.

Y seguro has entendido mejor lo que es Lazy Loading, CodeSplitting y c贸mo trabajan juntos.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 4

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cargar archivos JavaScript

Veo esto bastante util para sub secciones de la app donde sabemos que el usuario no va a entrar muy frecuente, como la seccion del cms que hicimos antes, sin embargo aqui en las categorias al ser una tienda virtual, sabemos que el usuario querra explorar esas secciones , por lo tanto al menos en este caso, no se si sea buena idea implementar esta tecnica 馃え

comando

$ ng g m website/pages/category --routing

Paren todo, esta parte de modulos va a quedar desactualizada con los Standalone components

https://angular.io/guide/standalone-migration