Преимущества Hermes Engine и почему вы должны его использовать
TL;DR
Hermes - это движок JavaScript с открытым исходным кодом, оптимизированный для запуска приложений React Native на Android. Для многих приложений включение Hermes приведет к сокращению времени запуска, уменьшению использования памяти и уменьшению размера приложения.
Чего можно ожидать от Гермеса:
- Сократите время, необходимое для того, чтобы приложение стало пригодным для использования, так называемое время взаимодействия (TTI).
- Меньший размер пакета (на Android, размер APK)
- Более низкое использование памяти
Перейдите в раздел Начало работы 🚀, чтобы начать переход на Гермес!
Введение
Миграция ранее существовавшего проекта может быть сложной задачей, в этой статье я расскажу о процессе, который требуется для миграции нашего текущего приложения в Гермес, я поделюсь некоторыми пояснениями, чтобы разработать ментальные карты того, как работает традиционный движок javascript, и понять истинную выгоду. Гермеса. Я также буду включать решения и объяснения возможных ошибок совместимости, с которыми я столкнулся, таких как mobx с MST.
Это приведет к повышению производительности и меньшему размеру приложения, работающего, в частности, с мобильными приложениями, которые в основном поддерживают реакцию на Android, потому что на iOS вы вынуждены использовать движок V8.
Почему вам следует использовать Гермес
Три основных вида архитектуры, которые Facebook стремится улучшить:
- Отказ от JIT-компилятора.
- Предварительная компиляция исходного кода JavaScript.
- Адаптация сборки мусора к ограничениям мобильной ОС.
Отказ от JIT
Что делает традиционный движок?
Я собираюсь поговорить конкретно о V8, первое, что делает движок, - это анализирует ваш исходный код в абстрактное синтаксическое дерево (AST). На этом этапе интерпретатор начинает обрабатывать язык, который вы в настоящее время выполняете. В течение многих лет JavaScript был просто интерпретируемым языком, поэтому, если вы запускали один и тот же код в своем JavaScript 100 раз, движок JavaScript должен был взять этот код и 100 раз преобразовать его в машинный код. Это дико неэффективно.
Браузер Chrome представил первый компилятор JavaScriptJIT в 2008 году. Компилятор JIT контрастирует с компилятором Ahead-of-Time (AOT) тем, что он компилирует ваш код во время его выполнения. код. Каждый раз, когда он видит код, выполненный несколько раз, он отмечает этот код как «теплый» для JIT-компиляции. Затем компилятор компилирует байт-кодовое представление этой «заглушки» JavaScript. Этот байт-код обычно является промежуточным представлением (IR), на один шаг удаленным из машинно-зависимого языка ассемблера. Эта работа выполняется JIT-компилятором.
Этот шаг задерживает начало выполнения JavaScript. Чтобы пропустить этот шаг, Hermes использует опережающий компилятор.
Предварительная компиляция исходного кода JavaScript
Hermes использует опережающий компилятор, который запускается как часть процесса сборки мобильного приложения. В результате на оптимизацию байт-кода можно потратить больше времени, поэтому байт-код будет меньше и эффективнее. Возможна оптимизация всей программы, например дедупликация функций и упаковка строковой таблицы. Байт-код разработан таким образом, что во время выполнения он может быть отображен в памяти и интерпретирован без необходимости чтения всего файла.
Адаптация сборщика мусора
Операционные системы убивают приложения, которые используют слишком много памяти. Когда приложения убиваются, требуются медленные перезапуски и страдает фоновая функциональность. Hermes, адаптируя сборку мусора, помогает снизить общее потребление виртуальной памяти за счет реализации распределения по требованию в несмежных фрагментах, которые можно перемещать и возвращать в ОС, когда они больше не нужны.
Ниже перечислены особенности сборщика мусора:
- Распределение по требованию: выделяет пространство VA (виртуального адреса) частями только по мере необходимости.
- Несмежные: пространство VA (виртуального адреса) не обязательно должно находиться в одном диапазоне памяти, что позволяет избежать ограничений ресурсов на 32-разрядных устройствах.
- Перемещение: возможность перемещать объекты означает, что память может быть дефрагментирована, а фрагменты, которые больше не нужны, возвращаются в операционную систему.
- Поколение: отсутствие сканирования всей кучи JavaScript сокращает время.
Начало работы 🚀
Предпосылки
Во-первых, убедитесь, что вы используете React Native версии не ниже 0.60.4.
Если у вас есть приложение, основанное на более ранней версии React Native, вам необходимо сначала обновить его. См. Обновление до новых версий React Native, чтобы узнать, как это сделать. Убедитесь, что все изменения в
android/app/build.gradleбыли применены, как описано в Помощнике по обновлению React Native. После обновления приложения убедитесь, что все работает, прежде чем пытаться переключиться на Гермес.
Примечание для пользователей Windows:
Гермесу требуется Распространяемый компонент Microsoft Visual C ++ 2015.
Инструкции:
Отредактируйте свой android/app/build.gradle и примените следующие изменения
project.ext.react = [
entryFile: "index.js",
- enableHermes: false // clean and rebuild if changing
+ enableHermes: true // clean and rebuild if changing
]
Если вы используете ProGuard, вам нужно будет добавить эти правила в proguard-rules.pro
-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }
Если вы уже создавали свое приложение хотя бы один раз, очистите сборку:
$ cd android && ./gradlew clean
Теперь у вас должна быть возможность разрабатывать и развертывать свое приложение как обычно:
$ npx react-native run-android
Теперь вы сможете начать использовать Гермес.
Проверить, включен ли Гермес
В JavaScript будет доступна глобальная переменная HermesInternal, которую можно использовать для проверки того, что Hermes используется:
const isHermes = () => global.HermesInternal != null;
Если вы создали приложение с нуля, вы можете использовать условную визуализацию строки, как в официальных инструкциях документации, на основе функции isHermes (), например:
Важное примечание: поскольку мой проект был построен ранее, у меня не было типичного примера на скриншоте выше, поэтому я пытался распечатать значение с помощью console.log с глобальным отладчиком. Позже я понял, что для просмотра журнала из консоли необходимо включить режим отладки. После активации отладки браузер выполняет js-код. Движок - это движок браузера V8, а не Hermes. Когда режим отладки выключен, телефон Android выполняет код js.
Чтобы увидеть преимущества Hermes, попробуйте выполнить сборку / развертывание вашего приложения для сравнения. Например:
$ react-native run-android --variant release
Проблемы с интеграцией прокси:
Если вы используете решение для управления состоянием, такое как redux или mobx (особенно для дерева состояний mobx), вы можете столкнуться с некоторыми ошибками во время компиляции во время интеграции Hermes из-за присутствия прокси в их исходном коде. Это была одна из ошибок, с которыми я столкнулся при текущей интеграции. Проблема в том, что пакет Hermes по умолчанию не поддерживает преобразование прокси, если вы не знаете, что такое прокси в Javascript »Эта статья содержит очень хорошее объяснение.
Решение заключалось в том, чтобы вручную добавить версию Hermes Engine 0.5.2-rc1, которая поддерживает прокси.
$ yarn add [email protected]
И готово!
Вы бы что-нибудь добавили? Пожалуйста, оставьте комментарий или оставьте свой отзыв. Хлопайте 👏 и делитесь. Это поможет мне улучшить контент и побудит меня делать больше. Приглашаю вас прочитать еще одну мою статью.
