Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Вышел React Native 0.70, а Hermes — новый движок JavaScript по умолчанию, поставляемый с этим обновлением. Вот чего ожидать от Hermes и некоторых функций, которые повлияют на производительность вашего приложения React Native.
Что такое Гермес?
Hermes — это движок JavaScript с открытым исходным кодом, который оптимизирует производительность в iOS и Android. приложение запускается путем предварительной компиляции кода JavaScript в эффективный байт-код и сокращения приложения использование памяти.
Обновление старых версий React Native для поддержки Hermes
В приложениях React Native, работающих на версии 0.70, Hermes будет включен по умолчанию. Для более старых приложений React Native сборка Hermes поставляется с каждой версией React Native, начиная с версии 0.60.4 для Android и версии 0.64.0 для iOS. Соответствующие версии устраняют риск несоответствия зависимостей в вашем приложении React Native.
Чтобы включить Hermes в этих старых версиях React Native, вам необходимо добавить некоторую конфигурацию в приложения для Android и iOS.
На Android отредактируйте Android/приложение/build.gradle файл:
проект.ext.реагировать = [
входФайл: "index.js",
включитьГермес: истинный// очищаем и перестраиваем при изменении
]
В iOS вы вносите следующие изменения в свой ios/подфайл:
use_react_native!(
: путь => конфиг[:реактнативепас],
:hermes_enabled => истинный
)
iOS требует, чтобы вы установили модули Hermes после настройки параметров.
Выполните следующую команду, чтобы установить модули:
компакт-диск ios && установка модуля
Включение Hermes с Expo
Вы также можете использовать движок Hermes для приложений React Native, созданных или запущенных с помощью Expo. Библиотека Expo поддерживает Hermes, начиная с SDK версии 42 для Android и SDK версии 43 для iOS до текущей версии 0.70. Важно отметить, что автономные приложения не могут запускать Hermes, если они не созданы с использованием сборки Expo Application Services Build.
Чтобы включить Hermes в приложении React Native, отредактируйте app.json файл:
{
"Экспо": {
"jsEngine": "Гермес"
}
}
Теперь ваше приложение, созданное с помощью Expo Application Services, будет использовать Hermes в качестве механизма JavaScript.
Оптимизация производительности Hermes для приложений React Native
Большинство движков JavaScript анализируют весь исходный код JavaScript, используя систему компиляции JIT (Just in Time). Система JIT замедляет выполнение, поскольку вашему устройству приходится ждать завершения всего процесса компиляции. Hermes использует подход с опережающей компиляцией (AOT), перенося большую часть мощной работы движка JavaScript на время сборки.
Hermes в основном влияет на три показателя производительности приложения: TTI приложения (время до интерактивности), размер двоичного файла и использование памяти.
Время интерактива
TTI — это время, которое требуется приложению для загрузки и поддержки взаимодействия с пользователем, такого как прокрутка или ввод текста. Hermes улучшает средний TTI для приложений React Native по сравнению с другими движками JavaScript.
Это сокращение TTI связано с тем, что Hermes не использует JIT-компилятор.
Двоичный размер
Двоичный размер — это размер связанного приложения React Native. Приложения для Android используют Формат файла APK, а приложения для iOS используют формат, который Apple называет IPA. Использование Hermes значительно уменьшает размер приложения на устройствах Android.
Использование памяти
Использование памяти — еще одна важная метрика для оптимизации в приложениях. Если приложение использует слишком много памяти, это отрицательно скажется на работе пользователя. Hermes реализует систему сборщика мусора, которая регулирует использование памяти по запросу, гарантируя, что приложение использует только необходимое пространство памяти во время работы.
Hermes поставляется с новым интерфейсом для отладки приложений React Native, работающих на эмуляторе, симуляторе или физическом устройстве, с помощью Expo. Hermes поддерживает отладку приложений React Native с помощью протокола Inspector Chrome DevTools. Не следует путать это с традиционным Отладка JavaScript с помощью консоли браузера.
Чтобы настроить Chrome для отладки приложений Hermes, выполните следующие действия.
- Перейдите к хром://проверить внутри вашего браузера Chrome.
- Нажать на Настроить кнопка.
- В модальном окне введите адрес сервера для сборщика метро, на котором запущено ваше приложение React Native, и нажмите Сделанный.
Теперь вы можете отлаживать свое приложение React Native, используя ссылку проверки цели Hermes.
Почему Hermes оптимизирован только для React Native
Оптимальная производительность Hermes как движка React Native JavaScript частично зависит от его среды выполнения. В React Native вы связываете весь код JavaScript в среде приложения. Эта система делает доставку байт-кода эффективной.
Еще одним фактором, который следует учитывать, является объем работы, выполняемой во время компиляции JavaScript. Hermes справляется с частым взаимодействием пользователей с мобильными приложениями, избегая агрессивной оптимизации байт-кода. Движок JIT-компилятора JavaScript не будет выполнять задачи таким образом.
