DEV Community

Cover image for Trucos en Angular que mejorarán el performance de tus aplicaciones.
GabrielOmar
GabrielOmar

Posted on

Trucos en Angular que mejorarán el performance de tus aplicaciones.

Angular es un framework bastante popular en el mundo empresarial. A pesar de que tiene la curva de aprendizaje más elevada que el resto, mucha gente se anima a aprenderlo. Personalmente, a mi me gusta bastante y es por eso que acá te dejaré unos trucos que tal vez no conocías 😎

Lazy Loading

Está característica es bastante popular ya que nos permite configurar nuestra aplicación para que cargue los archivos únicamente cuando son necesarios. Por ejemplo, tenemos dos vistas donde la primera sería la presentación y la segunda el blog. Todos los recursos que se necesiten para cargar el blog, no serán 'llamados/ejecutados' hasta que el usuario no vaya a esa sección.

Destruyendo Observables

Si bien los observables son de RxJs, cuando trabajemos con Angular, los vamos a usar bastante ya sea para los servicios o estar escuchando ciertos cambios de nuestra aplicación. Sin embargo, los observables tienen la particular característica que no se destruyen por si solos sino que debemos forzar a que suceda. Esto es necesario ya que sino, nuestros observables seguirán consumiendo espacio de memoria en background y podría hacer nuestra aplicación más lenta. Formas para destruir observables hay muchas, pero una que me gusta bastante es a través del operador takeUntil, el cual podemos anteponer a nuestra suscripción con el operador pipe, también de Rxjs. Al mismo tiempo nos apoyamos de un subject de tipo void que su única función sera hacer un next() y complete() en el OnDestroy del componente. Lo mejor es que de esta manera, podemos reutilizar nuestro subject en todas las subscripciones que tengamos en nuestro componente.

Pre fetching

Está funcionalidad es sin duda demasiado buena, parecido a lo que viene por default en otras tecnologías como Gatsby, podemos hacer que algunos archivos vayan pre cargando antes que el usuario entre a esa página. Por ejemplo, si vamos a entrar a una galería al colocar el mouse sobre el botón que nos llevará, nuestra aplicación irá cargando en background las imágenes respectivas para que de esta manera la experiencia del usuario sea mucho mejor.

Si te han gustado estos trucos puedes verlos en mis diferentes proyectos de github(https://github.com/QuispeRosasGabriel) 😎 y tú tienes algún truco que te gustaría compartir?

Top comments (0)