DEV Community

Cover image for Acelera tus apps con Lazy Loading 馃殌
Jean Carlo Vittory Laguna
Jean Carlo Vittory Laguna

Posted on

Acelera tus apps con Lazy Loading 馃殌

Por lo general cuando creamos aplicaciones con React tendemos a usar rutas para que el usuario pueda acceder a diferentes vistas de nuestra aplicaci贸n. Para ello usamos, por ejemplo, el cl谩sico navegador en la parte superior en donde podemos acceder al home, contacts, products o cualquier vista que queremos que el usuario acceda mediante un bot贸n.

Nuestro c贸digo suele verse algo as铆 cuando intentamos realizar el ejemplo anterior:

Image description

A simple vista pareciera que todo marcha bien, sin embargo cuando nuestra aplicaci贸n empieza a crecer y debemos incluir m谩s rutas para nuestros usuarios nuestra aplicaci贸n empieza a perder rendimiento debido a que cada vez que ingresamos a ella cargamos todos nuestros componentes.

Podr铆amos detenernos y preguntarnos 驴realmente nuestro usuario al ingresar al home necesita que le carguemos los archivos javascript y css de articles y contact? debemos recordar que estos archivos afectan el rendimiento de nuestra aplicaci贸n y para lograr una optimizaci贸n en este sentido se vuelve necesario evitar cargarle al usuario archivos innecesarios que afecten su experiencia.

Con base a lo anterior React nos provee una herramienta llamada Lazy que nos permite cargar los componentes solamente cuando el usuario los solicita despu茅s de la interacci贸n con alg煤n bot贸n o acci贸n que desate dicha solicitud.

Para implementar un lazy loading en nuestra aplicaci贸n debemos:

  1. Importar la funci贸n Lazy desde React y pasarle mediante un callback los imports de cada unos de los componentes que queremos cargar din谩micamente

Image description

Es importante recordar que los exports desde cada uno de nuestros componentes deben ser por default

Si intentamos usar nuestra aplicaci贸n en este momento observaremos que al navegar entre las rutas la consola nos arrojar谩 el siguiente error:

Image description

Para solucionar esto debemos realizar el siguiente paso:

  1. Debemos importar un feature que nos provee React llamado Suspense el cual debe envolver nuestras rutas y a su vez permitirnos usar un fallback que se renderizar谩 mientras nuestra aplicaci贸n realiza el fetching pertinente de archivos para poder renderizar el componente solicitado por el usuario en la vista. Nuestro c贸digo debe lucir as铆:

Image description

Si deseas aprender un poco m谩s a profundidad sobre Suspense

Y eso es todo!

Debemos recordar que el lazy loading nos permite mejorar el performance de nuestras aplicaciones cuando estas tienen muchos componentes y no queremos cargarle al usuario cientos de archivos Javascript cuando realmente solo necesita unos cuantos para poder acceder a una vista en concreto.

Top comments (0)