Para sus componentes, imágenes y lo que no

La carga diferida es una técnica antigua para optimizar las aplicaciones web y las aplicaciones móviles. La cosa es bastante sencilla: no renderice cosas si no se ven o no se requieren en ese momento. Entonces, por ejemplo, si tenemos una lista de publicaciones para mostrar, inicialmente solo deberíamos renderizar lo que está en la ventana gráfica. Eso significa que el resto de los elementos se renderizarán más tarde a pedido (cuando estén en la ventana gráfica o estén a punto de estar en la ventana gráfica).
¿Por qué la carga diferida?
La mayoría de las veces, nuestros usuarios no ven la página web completa, al menos al principio. No importa cómo se haya estructurado la interfaz de usuario de nuestra aplicación, ¡hay ciertos componentes que el usuario podría no necesitar inicialmente o nunca!
En estos casos, renderizar esos componentes no solo daña el rendimiento de nuestra aplicación, sino que también desperdicia una gran cantidad de recursos (especialmente cuando tienen imágenes o contenidos similares que requieren mucha información).
Por lo tanto, cargar o renderizar esos componentes bajo demanda parece ser una decisión más eficiente. Puede mejorar el rendimiento de la aplicación y, al mismo tiempo, puede ahorrarnos muchos recursos.
¿Cómo?
Vamos a crear una aplicación de muestra en la que podamos aplicar la carga diferida. Primero, necesitamos inicializar nuestra aplicación React usando create-react-app
los siguientes comandos:
create-react-app lazydemocd lazydemonpm run start
Esto puede tardar unos minutos en inicializarse y abrir nuestra aplicación de reacción en el 3000
puerto del navegador de forma predeterminada.
create-react-app
instalado en su PC, puede instalarlo con el comando:
npm install -g create-react-app
Ahora, haremos una lista que mostrará algunas publicaciones al azar. Entonces, obtengamos primero algunos datos ficticios. Cree un archivo llamado data.js
dentro de la src
carpeta de nuestro proyecto. Acabo de copiar y pegar la json
respuesta de este JSON
punto final de marcador de posición //jsonplaceholder.typicode.com/posts. También puede crear sus propios datos ficticios. Seguir el formato a continuación debería ser suficiente para este tutorial:

Reemplacemos App.js
el contenido del archivo con el siguiente código:


Aquí, simplemente estamos haciendo una lista posts
con sus title
y body
. Y con algunas CSS
modificaciones simples obtenemos la vista de la derecha. Aquí está la lista completa de renders a la vez. Ahora, si no queremos renderizar todo inicialmente, deberíamos aplicar lazy loading
. Instalemoslo en nuestro proyecto:
Fuente: twobin / react-lazyload
npm install —-save react-lazyload
Ahora, actualice el App.js
archivo importando y aplicando lazyload
.

El uso react-lazyload
es bastante sencillo, simplemente envuelva el componente con t mostrará Cargando ... hasta que el componente se haya cargado. También podemos e ef altura y del componente LazyLoad. Puede encontrar más detalles en la documentación: //github.com/twobin/react-lazyload#height …
LazyLoad>. Here we are using a placeholde
r component
set th
ective
and offs
Ahora, todas las publicaciones no se están procesando inicialmente. Solo unos pocos se renderizarán inicialmente según la ventana gráfica. Pero, como los contenidos son textuales hasta ahora, el efecto apenas se puede realizar a menos que inspeccionemos y veamos cómo cambia el DOM cuando se mueve de loading
a loaded
.
Para que nuestra carga diferida sea más efectiva, incorporemos imágenes dentro de las publicaciones. Usaremos Lorem Picsum para nuestras fotos. Nuestro Post
componente actualizado debería verse a continuación:

//picsum.photos/id/[image_id]/[width]/[height]
Ahora, como dije antes, las imágenes son componentes de una página web que consumen muchos datos y aquí estamos cargando imágenes para cada publicación. Aunque todo el componente se carga de forma diferida y la imagen también se carga con el componente, la imagen se carga un poco tarde y no tan bien. Por lo tanto, podemos mejorar la experiencia de carga de imágenes para nuestros usuarios utilizando LazyLoad para imágenes individuales.
La técnica consiste en cargar una imagen de muy baja calidad como marcador de posición y luego se carga la imagen original. Entonces, la final App.js
se vería así ...

Ahora podemos ver scroll
la lista con nuestro inspect element open
para ver cómo cambian estos componentes cuando se acercan a la ventana gráfica, luego se renderizan y el marcador de posición se reemplaza por contenido real.
Y hemos terminado, por ahora, nuestro LazyLoad está funcionando con toda su gracia. ¡¡¡Eso fue bastante fácil !!!

Github: //github.com/nowshad-sust/lazydemo
Reaccionar LazyLoad: twobin / react-lazyload