DEV Community

Cover image for Lazy loading en Angular
Danniel Navas
Danniel Navas

Posted on

Lazy loading en Angular

Que es Lazy loadind? es la técnica mas utilizada para la mejora de carga de nuestras aplicaciones, en la cual se reduce el peso del bundle dado que en este lo que hacemos es dividir la aplicación en parte pequeñas (componentes).

Además de ser la más utilizada es la que las empresas más piden en mi experiencia a una entrevista siempre ten en claro este tema y por esto te lo quiero explicar lo más sencillo posible.

Dado que tenemos nuestra aplicación vamos a terminar con una estructura parecida a lo siguiente:

lazyloading directorios

Con esto vamos a crear un nuestro primer componente con layzy para eso crearemos un module y un routing.

ng g c m componente —routing

Con esto creamos un module aparte y un router único para nuestro componente o componentes que mantendremos en esta parte de nuestra aplicación. Ya con esto sobre la misma ruta vamos a crear el componente

ng g c component/component

Con esto vamos a crear la ruta dentro de nuestro router local (router de nuestro componente).

router local

Si intentamos acceder a esta ruta no podremos ya que nuestro router global no sabe a dónde dirigirse, y agregando el siguiente código le mostraremos cómo resolverlo tanto en el global como en nuestro local con las posibles rutas internas, como te las muestro a continuación:

router global

Y con esto tendríamos nuestra aplicación con lazy loading.

Gracias por leer, nos vemos en una próxima ocasión.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay