Manejo de rutas
Qu茅 aprender谩s sobre Angular Router y programaci贸n modular
Creando rutas
Creando el Home
P谩gina de categor铆as
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
M贸dulos
LazyLoading y CodeSplitting
Programaci贸n Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de m贸dulos
Precarga de m贸dulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
No tienes acceso a esta clase
隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera
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.
Comencemos entendiendo c贸mo funcionan las solicitudes de una p谩gina web a un servidor HTTP.
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.
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.
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.
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.
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
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.
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?