No tienes acceso a esta clase

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

LazyLoading y CodeSplitting

10/25
Recursos

Dos conceptos claves que tienes que conocer como desarrollador front-end son el Lazy Loading y el CodeSplitting. En conjunto, buscan optimizar los tiempos de carga y rendimiento de tu aplicaci贸n. Veamos c贸mo lo hacen.

C贸mo es el proceso de una solicitud

Comencemos entendiendo c贸mo funcionan las solicitudes de una p谩gina web a un servidor HTTP.

Funcionamiento b谩sico de una request.png

Paso 1: Cuando se hace la primera solicitud de un recurso a un servidor, este devuelve el archivo base de la p谩gina web (com煤nmente llamado index.html).

Paso 2: El navegador lee este archivo, y realiza una nueva solicitud por cada recurso que encuentra. Por cada imagen, por cada hoja de estilos CSS y por cada archivo Javascript.

Paso 3: Cada archivo Javascript que es descargado, conlleva un proceso de cuatro pasos.

Procesamiento de archivos Javascript.png

El archivo JS primero se descarga, se parsea, se compila y finalmente se ejecuta su c贸digo.

La descarga del archivo es el paso m谩s importante y que m谩s tiempo suele necesitar, ya que depende del ancho de banda de la red y del peso del mismo.

Optimizaci贸n de tiempo y recursos

Para reducir el peso de las aplicaciones, aparece el concepto de Lazy Loading y el CodeSplitting que plantean la divisi贸n del c贸digo fuente Javascript en peque帽os m贸dulos y solo cargar aquellos que el usuario necesite, cuando realmente los necesite.

Angular utiliza Webpack para compilar y construir la aplicaci贸n. Por defecto, genera un solo m贸dulo denominado main.js. Un solo archivo con TODO el c贸digo Javascript de tu aplicaci贸n.

Buils de la aplicaci贸n sin Code Splitting.png

Esto podr铆a ser perjudicial para el rendimiento de tu aplicaci贸n, ya que a medida que crezca, m谩s pesada ser谩.

Para su soluci贸n, activando la modularizaci贸n de tu aplicaci贸n con Lazy Loading, Webpack dividir谩 la misma en N cantidad de Chunks (particiones) para una carga m谩s r谩pida de los archivos Javascript.

Build de la aplicaci贸n con Code Splitting.png

Por ejemplo, si tu aplicaci贸n posee una p谩gina de Home, una p谩gina Cat谩logo y una p谩gina de Contacto, Webpack dividir谩 el build de la aplicaci贸n en tres partes para enviarle al usuario solo las p谩ginas que necesita en ese momento.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 5

Preguntas 1

Ordenar por:

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

Code Splitting

Code Splitting

Es la t茅cnica que permite dividir el c贸digo en varios Chunks que se pueden descargar en demanda, mejorando la velocidad de carga de las p谩ginas.

Un like,si tambien le parecio bueno clase.

Like

En Conclusion podriamos usar el Home con routing para hacer el lazy loading.