{"id":4079,"date":"2019-11-26T13:44:01","date_gmt":"2019-11-26T13:44:01","guid":{"rendered":"https:\/\/www.tcit.cl\/2019\/11\/26\/desarrolladores-front-end-tensorflowjs-copy\/"},"modified":"2023-04-26T15:30:25","modified_gmt":"2023-04-26T19:30:25","slug":"perfile-aplicacion-react-rendimiento","status":"publish","type":"post","link":"https:\/\/www.tcit.cl\/ingles\/perfile-aplicacion-react-rendimiento\/","title":{"rendered":"Perfile una aplicaci\u00f3n React para rendimiento"},"content":{"rendered":"

Perfile una aplicaci\u00f3n React para rendimiento<\/h1>\n

React DevTools\u00a0es un software incre\u00edble y est\u00e1 disponible como una extensi\u00f3n de navegador para\u00a0Chrome\u00a0,\u00a0Firefox\u00a0, y puede conectarse para funcionar con la aplicaci\u00f3n React en cualquier lugar.<\/p>\n

Una de las mejores caracter\u00edsticas de React DevTools es su capacidad de creaci\u00f3n de perfiles.\u00a0Hay mucho en el generador de perfiles, y no vamos a entrar en todo esto en esta publicaci\u00f3n, pero pens\u00e9 que deber\u00eda mostrarle c\u00f3mo puede comenzar a usar React Profiler y evitar un escollo com\u00fan que las personas encuentran al perfilar su aplicaciones.<\/p>\n

Voy a trabajar con\u00a0mi aplicaci\u00f3n de estanter\u00eda\u00a0que hace un buen trabajo al caminar en la l\u00ednea entre lo suficientemente pr\u00e1ctico como para ser \u00abmundo real\u00bb pero lo suficientemente simple como para no requerir una gran cantidad de conocimiento espec\u00edfico de dominio para entender.\u00a0Si\u00e9ntase libre de seguirlo si lo desea, o (a\u00fan mejor) seguirlo en su propio proyecto.<\/p>\n

Instalar la extensi\u00f3n<\/h2>\n

El primer paso es asegurarse de instalar la extensi\u00f3n React DevTools para el navegador que est\u00e1 utilizando.\u00a0Estoy usando Chrome, as\u00ed que lo instal\u00e9\u00a0en Chrome WebStore\u00a0.\u00a0Si no aparece despu\u00e9s de instalar la extensi\u00f3n, es posible que deba cerrar el panel DevTools de su navegador y volver a abrirlos.<\/p>\n

Inicia la aplicaci\u00f3n<\/h2>\n

La aplicaci\u00f3n de estanter\u00eda utiliza\u00a0react-scripts<\/code>(gracias a\u00a0create-react-app<\/code>), as\u00ed que despu\u00e9s de haber instalado el proyecto localmente, ejec\u00fatelo\u00a0npm run start<\/code>para\u00a0ejecutar\u00a0el servidor de desarrollo.\u00a0Esto abrir\u00e1 la aplicaci\u00f3n en su navegador en\u00a0http:\/\/localhost:3000<\/code>:<\/p>\n

\"aplicaci\u00f3n<\/p>\n

Comience una sesi\u00f3n de perfilado<\/h2>\n

Abra las herramientas de desarrollo del navegador haciendo clic derecho en cualquier parte de la p\u00e1gina y haciendo clic en \u00abInspeccionar\u00bb. Luego seleccione la pesta\u00f1a \u00ab\u269b Profiler\u00bb. Este es el perfilador React DevTools y ahora puede hacer clic en el peque\u00f1o c\u00edrculo azul para \u00abComenzar a perfilar\u00bb la aplicaci\u00f3n.\"aplicaci\u00f3n<\/p>\n

Desde aqu\u00ed, adelante e interact\u00faa un poco con la aplicaci\u00f3n.\u00a0Me voy a registrar para una nueva cuenta.\u00a0Luego haga clic en el peque\u00f1o c\u00edrculo rojo para \u00abDejar de perfilar\u00bb.<\/p>\n

\"aplicaci\u00f3n<\/p>\n

Explore los datos de perfil<\/h2>\n

Desde aqu\u00ed, tiene algunas opciones para explorar los datos que las DevTools recopilaron mientras interactuaba con la aplicaci\u00f3n.\u00a0La vista predeterminada es el \u00abgr\u00e1fico Flamegraph\u00bb, y tambi\u00e9n est\u00e1 el \u00abgr\u00e1fico clasificado\u00bb.\u00a0As\u00ed es como se ve el \u00abgr\u00e1fico de Flamegraph\u00bb<\/p>\n

\"aplicaci\u00f3n<\/p>\n

Peligro: medir el modo de desarrollo<\/h2>\n

Quiero mencionar un grave obst\u00e1culo que debe evitar al realizar mediciones de rendimiento como la creaci\u00f3n de perfiles.\u00a0En este momento estamos midiendo c\u00f3mo funciona nuestra aplicaci\u00f3n en modo de desarrollo.\u00a0Si 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\u00f3digos y pr\u00e1cticas problem\u00e1ticos.\u00a0Esta es una de las cosas que m\u00e1s me gusta de React, pero eso tiene un costo de rendimiento (a menudo significativo).<\/p>\n

Debido a esto, sus mediciones de rendimiento est\u00e1n contaminadas por el c\u00f3digo de tiempo de desarrollo de React (algo que sus usuarios nunca deber\u00edan estar ejecutando).<\/p>\n

Entonces, si desea obtener una medici\u00f3n precisa del rendimiento de producci\u00f3n de su aplicaci\u00f3n, debe asegurarse de realizar sus mediciones en la versi\u00f3n de producci\u00f3n de su c\u00f3digo (el c\u00f3digo que usar\u00e1n sus usuarios finales).<\/p>\n

Crea y mide la aplicaci\u00f3n de producci\u00f3n<\/h3>\n

As\u00ed que ejecutemos la compilaci\u00f3n de producci\u00f3n optimizada con\u00a0npm run build<\/code>.\u00a0A continuaci\u00f3n, ejecutaremos\u00a0npx serve -s build<\/code>la versi\u00f3n compilada de la aplicaci\u00f3n en un servidor HTTP.\u00a0Eso deber\u00eda iniciar la aplicaci\u00f3n en el puerto 5000. As\u00ed que hablemos de eso y comencemos una sesi\u00f3n de creaci\u00f3n de perfiles sobre eso … \u00a1Espere!\u00a0\u00a1Oh no!\u00a0\u00bfQu\u00e9 es esto?<\/p>\n

\"Reaccione<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Perfiles no admitidos.<\/em><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0El soporte de creaci\u00f3n de perfiles requiere un desarrollo o una creaci\u00f3n de perfiles de producci\u00f3n de React v16.5 +.<\/em><\/p>\n

Como resultado, React tiene un c\u00f3digo espec\u00edfico para la creaci\u00f3n de perfiles y con el inter\u00e9s de hacer que su aplicaci\u00f3n sea lo m\u00e1s r\u00e1pida posible, en realidad eliminan ese c\u00f3digo de la compilaci\u00f3n de producci\u00f3n de React.\u00a0Gracias reaccionar!\u00a0Excepto ahora, \u00bfqu\u00e9 hacemos?\u00a0Bueno, supongo que podr\u00edamos ir a la esencia vinculada por Brian.\u00a0O podr\u00edas seguir leyendo y te mostrar\u00e9 qu\u00e9 hacer.<\/p>\n

NOTA: Si est\u00e1 utilizando create-react-app<\/strong>\u00a0con\u00a0react-scripts@>=3.2.0<\/code>, simplemente puede ejecutar\u00a0npx react-scripts build --profile<\/code>y har\u00e1 todo esto por usted (\u00a0gracias a Jacob\u00a0) y puede pasar al siguiente escollo.\u00a0De lo contrario, sigue leyendo.<\/p>\n

Actualice la configuraci\u00f3n del paquete web para perfiles de producci\u00f3n<\/h3>\n

Como se se\u00f1al\u00f3 en el mensaje, hay una versi\u00f3n de producci\u00f3n de React que elimina la mayor parte del c\u00f3digo \u00fatil del tiempo de desarrollo, pero deja intacto el c\u00f3digo de creaci\u00f3n de perfiles.\u00a0Todav\u00eda es un poco m\u00e1s lento, pero nos da la mejor idea de c\u00f3mo est\u00e1n funcionando nuestros componentes en un entorno de producci\u00f3n.<\/p>\n

Hay algunas formas de hacerlo, pero la m\u00e1s simple es actualizar la configuraci\u00f3n del paquete web para alias cualquier importaci\u00f3n de ciertos m\u00f3dulos a la versi\u00f3n de creaci\u00f3n de perfiles de ese m\u00f3dulo.\u00a0Hay dos de estos m\u00f3dulos:<\/p>\n