Perfile una aplicación React para rendimiento
React DevTools es un software increíble y está disponible como una extensión de navegador para Chrome , Firefox , y puede conectarse para funcionar con la aplicación React en cualquier lugar.
Una de las mejores características de React DevTools es su capacidad de creación de perfiles. Hay mucho en el generador de perfiles, y no vamos a entrar en todo esto en esta publicación, pero pensé que debería mostrarle cómo puede comenzar a usar React Profiler y evitar un escollo común que las personas encuentran al perfilar su aplicaciones.
Voy a trabajar con mi aplicación de estantería que hace un buen trabajo al caminar en la línea entre lo suficientemente práctico como para ser «mundo real» pero lo suficientemente simple como para no requerir una gran cantidad de conocimiento específico de dominio para entender. Siéntase libre de seguirlo si lo desea, o (aún mejor) seguirlo en su propio proyecto.
Instalar la extensión
El primer paso es asegurarse de instalar la extensión React DevTools para el navegador que está utilizando. Estoy usando Chrome, así que lo instalé en Chrome WebStore . Si no aparece después de instalar la extensión, es posible que deba cerrar el panel DevTools de su navegador y volver a abrirlos.
Inicia la aplicación
La aplicación de estantería utiliza react-scripts(gracias a create-react-app), así que después de haber instalado el proyecto localmente, ejecútelo npm run startpara ejecutar el servidor de desarrollo. Esto abrirá la aplicación en su navegador en http://localhost:3000:
Comience una sesión de perfilado
Abra las herramientas de desarrollo del navegador haciendo clic derecho en cualquier parte de la página y haciendo clic en «Inspeccionar». Luego seleccione la pestaña «⚛ Profiler». Este es el perfilador React DevTools y ahora puede hacer clic en el pequeño círculo azul para «Comenzar a perfilar» la aplicación.
Desde aquí, adelante e interactúa un poco con la aplicación. Me voy a registrar para una nueva cuenta. Luego haga clic en el pequeño círculo rojo para «Dejar de perfilar».
Explore los datos de perfil
Desde aquí, tiene algunas opciones para explorar los datos que las DevTools recopilaron mientras interactuaba con la aplicación. La vista predeterminada es el «gráfico Flamegraph», y también está el «gráfico clasificado». Así es como se ve el «gráfico de Flamegraph»
Peligro: medir el modo de desarrollo
Quiero mencionar un grave obstáculo que debe evitar al realizar mediciones de rendimiento como la creación de perfiles. En este momento estamos midiendo cómo funciona nuestra aplicación en modo de desarrollo. Si ha estado usando React por un tiempo, es probable que sepa que viene con muchas advertencias en tiempo de desarrollo para ayudarlo a alejarse de códigos y prácticas problemáticos. Esta es una de las cosas que más me gusta de React, pero eso tiene un costo de rendimiento (a menudo significativo).
Debido a esto, sus mediciones de rendimiento están contaminadas por el código de tiempo de desarrollo de React (algo que sus usuarios nunca deberían estar ejecutando).
Entonces, si desea obtener una medición precisa del rendimiento de producción de su aplicación, debe asegurarse de realizar sus mediciones en la versión de producción de su código (el código que usarán sus usuarios finales).
Crea y mide la aplicación de producción
Así que ejecutemos la compilación de producción optimizada con npm run build. A continuación, ejecutaremos npx serve -s buildla versión compilada de la aplicación en un servidor HTTP. Eso debería iniciar la aplicación en el puerto 5000. Así que hablemos de eso y comencemos una sesión de creación de perfiles sobre eso … ¡Espere! ¡Oh no! ¿Qué es esto?
Perfiles no admitidos.
El soporte de creación de perfiles requiere un desarrollo o una creación de perfiles de producción de React v16.5 +.
Como resultado, React tiene un código específico para la creación de perfiles y con el interés de hacer que su aplicación sea lo más rápida posible, en realidad eliminan ese código de la compilación de producción de React. Gracias reaccionar! Excepto ahora, ¿qué hacemos? Bueno, supongo que podríamos ir a la esencia vinculada por Brian. O podrías seguir leyendo y te mostraré qué hacer.
NOTA: Si está utilizando create-react-app con react-scripts@>=3.2.0, simplemente puede ejecutar npx react-scripts build --profiley hará todo esto por usted ( gracias a Jacob ) y puede pasar al siguiente escollo. De lo contrario, sigue leyendo.
Actualice la configuración del paquete web para perfiles de producción
Como se señaló en el mensaje, hay una versión de producción de React que elimina la mayor parte del código útil del tiempo de desarrollo, pero deja intacto el código de creación de perfiles. Todavía es un poco más lento, pero nos da la mejor idea de cómo están funcionando nuestros componentes en un entorno de producción.
Hay algunas formas de hacerlo, pero la más simple es actualizar la configuración del paquete web para alias cualquier importación de ciertos módulos a la versión de creación de perfiles de ese módulo. Hay dos de estos módulos:
react-dom->react-dom/profilingscheduler/tracing->scheduler/tracing-profiling
Ambos son paquetes React y necesitan un código especial para que funcione el generador de perfiles.
La forma de actualizar la configuración de su paquete web variará según el marco que esté utilizando (create-react-app, next.js, gatsby.js o el suyo con el paquete web sin formato). En nuestro caso, estamos usando create-react-app y no hay una forma oficialmente admitida de extender o modificar la configuración del paquete web. Afortunadamente para nosotros, esto es solo algo que queremos hacer localmente, así que haremos un poco de espeleología en nuestronode_modules .
Entonces, si está usando react-scripts@3.1.1(o en algún lugar por allí), puede abrir la configuración del paquete web aquí: ./node_modules/react-scripts/config/webpack.config.js
Luego ubique el código que se ve así y agregue las líneas indicadas:
Perfilar la compilación de perfiles de producción
Genial, ahora corre npm run build, ¡ npx serve -s buildy volvamos a crear un perfil de la aplicación! Seguiré los mismos pasos de registro que hice la última vez. Esto es con lo que salí:
¡Agradable! Notarás que esta es la misma interacción que la última vez (muestra la página después del registro) y pasamos de 13.7ms a 6.5ms. Buena mejora!
Pero uh oh, ¿qué es esta Anonymouscosa componente en todo el lugar? ¿Y tenemos un componente llamado eeotro llamado Z? ¿Eh? ¿Que está pasando aqui? Bueno, debido a que estamos creando nuestra aplicación para producción, estamos minimizando nuestro código para que sea más rápido cargarlo / analizarlo, lo cual es algo bueno para nuestros usuarios finales, pero algo malo para nuestra medición de rendimiento porque es difícil para nosotros saber cuál de estos componentes es el culpable de nuestros problemas de rendimiento.
Desactivar el cambio de nombre de la función
React sabe cómo llamar a sus componentes en función de la namepropiedad del componente:
Es por eso que estamos viendo estos nombres divertidos en nuestras mediciones de rendimiento. Por lo tanto, debemos deshabilitar esta función de manipulación.
La aplicación Create React utiliza una herramienta llamada Terser via terser-webpack-plugin para hacer la minificación, por lo que simplemente necesitamos actualizar la configuración para preservar la función y los nombres de clase.
Entonces, en el mismo archivo de configuración del paquete web, desplácese hacia abajo hasta donde está configurado el complemento y modifíquelo así:
keep_classnamesy keep_fnamesconfigurado para true, ahora intentemos construir nuestro código de aplicación y ejecutar una sesión de creación de perfiles una vez más.
¡El más excelente! ¡Ahora tenemos una sesión de perfil que nos muestra los nombres de todos nuestros componentes y se están ejecutando usando un código similar al código que nuestros usuarios finales ejecutarán mucho más de cerca!
Peligro: Perfilar con una computadora rápida
Les garantizo que la mayoría de ustedes que están leyendo esto ahora están desarrollando su aplicación con un dispositivo que es mucho más poderoso que la mayoría de las personas que usan la aplicación. No hay sustituto para probar su aplicación en los dispositivos que usarán los usuarios. Dicho esto, puede obtener una idea mucho mejor del rendimiento real de su aplicación si acelera su CPU para simular la experiencia de algunos usuarios de su aplicación.
Entonces hagamos eso. Haga clic en la pestaña «Rendimiento» de Chrome DevTools, luego en el ícono de ajustes para mostrar la configuración, luego en la opción CPU, seleccione «6x desaceleración».
Ahora haz todo de nuevo y comprueba la diferencia:
¡Uf! 31.8ms! Eso es bastante la desaceleración! Obtenga más información sobre el impacto de ese momento en la experiencia del usuario en esta publicación de blog titulada Rendering Performance . ¡Esto puede ser algo que valga la pena considerar!
Conclusión
Solo hemos cubierto lo que necesita hacer para comenzar a perfilar correctamente una aplicación React, pero esperamos que haya aprendido lo suficiente como para probarla en su propia aplicación y comenzar a explorar las implicaciones de rendimiento de su aplicación.
¡Buena suerte!
