Casi el 60% de los visitantes del sitio lo abandonan si tarda más de 3 segundos en cargarse. El 80% de estos visitantes ya no regresan al sitio. Esto sugiere que el éxito de un proyecto web no depende menos de su velocidad. El autor del material, cuya traducción publicamos hoy, quiere hablar sobre técnicas para mejorar el rendimiento de las aplicaciones React.
Resultados de optimización de aplicacionesPuntos de referencia
Antes de contarte cómo aceleré la aplicación, quiero mostrar algunos números. Aquí las mediciones se llevan a cabo con la expectativa de que funcionarán con la aplicación utilizando una conexión que es bastante lenta para los estándares modernos. Pero debe tenerse en cuenta que, en realidad, la mayoría de los usuarios tendrán conexiones más rápidas.
- Durante las mediciones realizadas por la pestaña Red de las herramientas para desarrolladores de Chrome, la velocidad de transferencia de datos se limitó por la fuerza al nivel de una conexión 3G rápida.
- Primera métrica de carga obtenida con el caché deshabilitado.
- El indicador de segunda carga indica el tiempo de recarga de la aplicación cuando el caché está activado.
Como puede ver, la diferencia entre una aplicación optimizada y una no optimizada es bastante grande. Esto es especialmente notable en redes lentas.
El tamaño del paquete de la aplicación se examinó utilizando source-map-explorer. Esta herramienta también le permite saber cuánto espacio ocupan varias bibliotecas. Los indicadores que se pueden ver en la parte superior de la figura se miden con Google Lighthouse.
Ahora hablaré sobre cómo optimicé la aplicación.
1. Usando CSS en lugar de CSS-in-JS
En la versión anterior de la aplicación, usaba la biblioteca de componentes con estilo. ¿Por qué es esto malo? La cuestión es que CSS simple es más rápido y ocupa menos espacio. Los navegadores modernos pueden cargar código CSS en paralelo con el paquete de JavaScript. Además, no necesita una biblioteca adicional para usar CSS normal. La versión minimizada de los componentes con estilo ocupa aproximadamente 54 Kb. El uso de CSS regular en lugar de componentes con estilo condujo al hecho de que el código de la aplicación se carga más rápido y al hecho de que al cambiar los estilos, el sistema tiene que realizar menos cálculos.
Simplemente abandonar la biblioteca de componentes con estilo y cambiar a CSS normal puede reducir el tiempo de carga del sitio en aproximadamente 0.3 segundosSi CSS permite un mejor rendimiento que las tecnologías que implementan CSS-in-JS, es posible que se pregunte por qué los desarrolladores usan esta tecnología de diseño de componentes. Una de las razones para elegir CSS-in-JS es el hecho de que esta tecnología le permite limitar el alcance de los estilos y abandonar el estilo global. Es conveniente de usar para trabajar con temas de aplicaciones. Y a alguien, tal vez, simplemente le gusta diseñar aplicaciones React de esa manera.
▍ Estilos con alcance limitado
Create-react-app ahora oficialmente admite
módulos CSS con un alcance limitado. Esto significa que puede limitar el alcance de los estilos sin usar bibliotecas adicionales.
▍ Temas
Si trabaja con la biblioteca de componentes con estilo, para utilizar las variables que definen los temas, simplemente
ThemeProvider estas variables en
ThemeProvider . Todo esto es bueno, pero a partir de mayo de 2019, el 91% de los navegadores admiten una función CSS estándar similar.
Si cree que el 91% no es un indicador suficientemente bueno, considere que podría no ser tan pequeño.
Soporte variable de CSSEn realidad, si no está interesado en el soporte de IE, puede usar
variables CSS de manera segura en sus proyectos. Si está interesado en este tema, le recomiendo que eche un vistazo a
este material.
2. Evitar grandes bibliotecas CSS
Material de análisis de paquete-uiSoy un gran admirador del diseño de materiales. Se ha escrito una gran biblioteca de materiales llamada material-ui para React. Esta biblioteca tiene solo un problema. Esta es su talla. Ella es muy buena Incluso si usa solo sus componentes individuales, su implementación del mecanismo CSS-in-JS caerá en el paquete, y esto es aproximadamente 30 Kb de código minificado.
Cuales son las alternativas? Decidí construir mis propios componentes, diseñándolos en el proceso de creación de la aplicación. Una de las razones de esta elección fue que quería actualizar mi conocimiento de CSS. Y no he escrito código CSS durante mucho tiempo. Sin embargo, hay otras posibilidades. En particular, estamos hablando de marcos CSS, cuyos tamaños son mucho más pequeños que el tamaño de material-ui. Por ejemplo, estos son Specter y Bulma, cuyo código toma, respectivamente, 9 y 40 Kb después de la compresión GZIP.
Espectro: 9 Kb después de la compresión GZIPBulma - 40 Kb después de la compresión GZIP3. Páginas de carga diferidas
Entonces, tiene un enrutador con muchas páginas importadas. Si hablamos de un par de páginas, aquí no hay problemas. Pero a medida que aumenta el número de páginas, también lo hace el tiempo que se muestra el sitio por primera vez. Así es como se verían los comandos de importación:
import NotFound from "pages/NotFound"; import Projects from "pages/Projects"; import Project from "pages/Project";
¿Cómo mejorarlo? Afortunadamente para nosotros, React puede organizar la carga diferida de páginas. Lo mismo se aplica al código del componente, que puede dividirse en pequeños fragmentos, cargados cuando sea necesario. Así es como se ve:
import React, { lazy, Suspense } from "react"; const load = (Component: any) => (props: any) => ( <Suspense fallback={<Loader />}> <Component {...props} /> </Suspense> ); const NotFound = load(lazy(() => import("pages/NotFound"))); const Projects = load(lazy(() => import("pages/Projects"))); const Project = load(lazy(() => import("pages/Project")));
4. Tecnologías de aplicaciones web progresivas
Las aplicaciones web progresivas utilizan trabajadores de servicio. Permiten a los usuarios agregar aplicaciones a las pantallas de inicio de sus dispositivos. Pero esto no se limita a las opciones del trabajador de servicio. En particular, pueden mejorar significativamente el almacenamiento en caché. Esto lleva al hecho de que la aplicación, después de la primera descarga, se cargará mucho más rápido.
5. Deshacerse de paquetes que parecen interesantes, pero que no aportan muchos beneficios
En mi proyecto original, cuando monté los componentes, usé mucha animación que animaba la carga de la página. Todo esto no solo ralentizó la página. Esto la hizo mucho más lenta de lo que podía ser. Yo, mirando el sitio y regocijándome por lo lindo que se ve, hasta cierto punto no pensé en el rendimiento. Pero el sitio no solo estaba animado. Había otras decoraciones similares. Por ejemplo, un botón que le permite ir a la parte superior de la página. Por ejemplo: carga animada de algunos elementos. Me gustó todo esto, pero después de una inspección más cercana resultó que, por ejemplo, el sitio realmente se ralentiza en los dispositivos no más rápidos. Además, al principio probé el sitio exclusivamente en una computadora portátil, por lo que no me enteré de inmediato.
También tenía un componente de control deslizante, que agregué a la página sin pensar mucho en su "peso". Lo usé para una presentación de diapositivas. Como resultó más tarde, solo el código de este control deslizante ocupaba, en una forma minimizada, 30 Kb. Luego decidí crear un componente para una presentación de diapositivas por mi cuenta. Su código minificado, al final, tomó 25 KB. Este volumen incluye una buena biblioteca de animación y un sistema para trabajar con gestos que pueden usarse no solo para presentaciones de diapositivas, sino también en otras partes de la aplicación. Y parece que lo que hice es mucho mejor que una solución de terceros.
Aquí hay un control deslizante de NPM.
Control deslizante de NPMAquí está mi control deslizante
Control deslizante de desarrollo propio (en la vida funciona mucho más suavemente que en esta imagen GIF con una baja velocidad de fotogramas)Vea este control deslizante en acción
aquí .
▍ Análisis de tamaño de paquete
Si usa create-react-app, es muy fácil analizar la composición del paquete. Para hacer esto, ejecute el
npm run build , y luego el
npx source-map-explorer "build/static/js/*.js" . Después de eso, se abrirá una página con información sobre la composición del paquete, similar a la que se muestra a continuación.
Información del paqueteResumen
Como puede ver, acelerar las aplicaciones React no es tan difícil. Es suficiente monitorear cuidadosamente de qué están hechos, probarlos y hacer los cambios apropiados.
Aquí está el proyecto que se discutió aquí, antes de la mejora y
más adelante .
Si está interesado en optimizar las aplicaciones React, estas son algunas de nuestras publicaciones sobre este tema:
Estimados lectores! ¿Tiene ejemplos de optimización exitosa (o no exitosa) de las aplicaciones React?
