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-applos siguientes comandos:
create-react-app lazydemocd lazydemonpm run startEsto puede tardar unos minutos en inicializarse y abrir nuestra aplicación de reacción en el 3000puerto del navegador de forma predeterminada.
create-react-appinstalado 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.jsdentro de la srccarpeta de nuestro proyecto. Acabo de copiar y pegar la jsonrespuesta de este JSONpunto 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.jsel contenido del archivo con el siguiente código:
Aquí, simplemente estamos haciendo una lista postscon sus titley body. Y con algunas CSSmodificaciones 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-lazyloadAhora, actualice el App.jsarchivo importando y aplicando lazyload.
El uso react-lazyloades 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 placeholder component
set thectiveand 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 loadinga loaded.
Para que nuestra carga diferida sea más efectiva, incorporemos imágenes dentro de las publicaciones. Usaremos Lorem Picsum para nuestras fotos. Nuestro Postcomponente actualizado debería verse a continuación:
Formato de URL de Lorem Picsum
//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.jsse vería así ...
Ahora podemos ver scrollla lista con nuestro inspect element openpara 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 !!!
La imagen LazyLoad aquí no es el mejor caso de uso ya que ya la maneja el componente LazyLoad. Pero, la técnica puede ser muy útil en otros casos de uso donde tengamos que mostrar muchas imágenes. Intente deshabilitar el componente LazyLoad on Post pero mantenga la imagen LazyLoad, puede ver su efecto.
Github: //github.com/nowshad-sust/lazydemo
Reaccionar LazyLoad: twobin / react-lazyload