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:

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

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:

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í:

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.