Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
Ya salió React Native 0.70 y Hermes es el nuevo motor de JavaScript predeterminado que se incluye con esta actualización. Esto es lo que puede esperar de Hermes y algunas de las funciones que afectarán el rendimiento de su aplicación React Native.
¿Qué es Hermes?
Hermes es un motor JavaScript de código abierto que optimiza el rendimiento en iOS y Android. La aplicación se inicia al compilar previamente el código JavaScript en un código de bytes eficiente y reducir la aplicación. uso de memoria.
Actualización de versiones antiguas de React Native para admitir Hermes
Las aplicaciones React Native que se ejecutan en 0.70 tendrán Hermes habilitado de forma predeterminada. Para aplicaciones React Native más antiguas, se envía una compilación de Hermes con cada versión de React Native a partir de la versión 0.60.4 para compilaciones de Android y la versión 0.64.0 para iOS. Las versiones coincidentes eliminan el riesgo de un desajuste de dependencia en su aplicación React Native.
Para habilitar Hermes en estas versiones anteriores de React Native, deberá agregar alguna configuración a sus aplicaciones de Android e iOS.
En Android, edite su Android/aplicación/build.gradle archivo:
proyecto.ext.reaccionar = [
archivo de entrada: "índice.js",
habilitarHermes: verdadero// limpia y reconstruye si cambia
]
En iOS, realiza los siguientes cambios en su ios/Podfile:
use_react_native!(
:ruta => config[:reactNativePath],
:hermes_habilitado => verdadero
)
iOS requiere que instales los pods de Hermes después de configurar los ajustes.
Ejecute el siguiente comando para instalar los pods:
cd ios && instalación de la vaina
Habilitación de Hermes con Expo
También puede usar el motor Hermes para aplicaciones React Native creadas o ejecutadas con Expo. La biblioteca Expo admite Hermes desde SDK versión 42 en Android y SDK versión 43 en iOS hasta la versión actual 0.70. Es importante tener en cuenta que las aplicaciones independientes no pueden ejecutar Hermes a menos que se construyan utilizando Expo Application Services Build.
Para habilitar Hermes en una aplicación React Native, edite su aplicación.json archivo:
{
"exposición": {
"jsEngine": "Hermes"
}
}
Ahora su aplicación creada con Expo Application Services tendrá Hermes habilitado como su motor de JavaScript.
Optimización del rendimiento de Hermes para aplicaciones nativas React
La mayoría de los motores de JavaScript analizan todo el código fuente de JavaScript mediante un sistema de compilación JIT (Just in Time). El sistema JIT ralentiza la ejecución porque su dispositivo debe esperar a que se complete todo el proceso de compilación. Hermes utiliza un enfoque de compilación anticipada (AOT), que transfiere la mayor parte del trabajo pesado del motor JavaScript al tiempo de compilación.
Hermes afecta principalmente a tres métricas de rendimiento de la aplicación: la aplicación TTI (Tiempo de interacción), el tamaño binario y el uso de la memoria.
Tiempo para Interactivo
El TTI es el tiempo que tarda una aplicación en cargarse y admitir la interacción del usuario, como desplazarse o escribir. Hermes mejora el TTI promedio para aplicaciones React Native en comparación con otros motores de JavaScript.
Esta reducción en TTI se debe a que Hermes no ejecuta un compilador JIT.
Tamaño binario
El tamaño binario es el tamaño de la aplicación React Native incluida. Las aplicaciones de Android utilizan el Formato de archivo APK, mientras que las aplicaciones de iOS usan un formato que Apple llama IPA. El uso de Hermes reduce significativamente el tamaño de la aplicación en los dispositivos Android.
Uso de memoria
El uso de la memoria es otra métrica crítica para optimizar las aplicaciones. La experiencia del usuario de una aplicación se vería afectada negativamente si utiliza demasiada memoria. Hermes implementa un sistema de recolección de basura que regula el uso de la memoria bajo demanda, asegurando que una aplicación solo use el espacio de memoria necesario mientras se ejecuta.
Hermes viene con una nueva experiencia para depurar aplicaciones React Native que se ejecutan en un emulador, simulador o dispositivo físico usando Expo. Hermes admite la depuración de aplicaciones React Native utilizando el Protocolo Inspector de Chrome DevTools. No debes confundir esto con lo tradicional. Depuración de JavaScript usando la consola del navegador.
Para configurar Chrome para depurar aplicaciones de Hermes, sigue estos pasos.
- Navegar a cromo://inspeccionar dentro de su navegador Chrome.
- Clickea en el Configurar botón.
- Dentro del modal en pantalla, ingrese la dirección del servidor para el paquete de metro que ejecuta su aplicación React Native y haga clic en Hecho.
Ahora puede depurar su aplicación React Native utilizando el enlace de inspección de destino de Hermes.
Por qué Hermes está optimizado solo para React Native
El rendimiento óptimo de Hermes como motor React Native JavaScript se debe en parte a su entorno de tiempo de ejecución. En React Native, empaqueta todo el código JavaScript dentro del entorno de la aplicación. Este sistema hace que el bytecode de envío sea eficiente.
Otro factor a considerar es la cantidad de trabajo realizado durante la compilación de JavaScript. Hermes gestiona la interacción frecuente del usuario anticipada de las aplicaciones móviles mientras evita la optimización agresiva del código de bytes. Un motor de JavaScript del compilador JIT no realizaría tareas de esta manera.