Автор Пайал Миттал
Facebook запустил новый движок JavaScript с открытым исходным кодом под названием «Hermes» для повышения производительности мобильных приложений React Native на Android.
В течение нескольких месяцев команда Facebook непрерывно работала над улучшением кода и платформ JavaScript для повышения производительности приложений Facebook. Проанализировав данные о производительности, они заметили, что сам движок JavaScript был значительным фактором в производительности при запуске и размере загрузки. Поэтому они работали над оптимизацией производительности JavaScript в более ограниченных средах и разработали «Гермес». Команда еще не планировала распространять проект на браузеры или серверы, такие как NodeJS.
Здесь мы узнаем больше о Hermes. Тогда давай нырнем ...
Обзор о Hermes-
Hermes специально создан для ускорения запуска приложений с помощью статической оптимизации и компактного байт-кода. Это улучшает время запуска, размер приложения и использование памяти приложениями.
В блоге Facebook написал:
«Hermes улучшает производительность React Native, уменьшая использование памяти, уменьшая размер загружаемых файлов и уменьшая время, необходимое для того, чтобы приложение стало пригодным для использования, или« время до интерактивности »(TTI)».
Гермес улучшает некоторые основные атрибуты приложения, обеспечивающие его высокую производительность, а именно:
- Время взаимодействия (TTI) - приложения запускаются быстрее, сокращая время запуска за счет предварительной компиляции байт-кода.
- Размер загрузки (размер файла APK) - будучи меньше по размеру, он запускается мгновенно, не утяжеляя приложение.
- Снижение использования памяти
- Опережающая статическая оптимизация
- Нет компилятора JIT (Just-In-Time)
- Сжатый байт-код
- Предварительная компиляция байт-кода
- Стратегия сборщика мусора с функциями незаразного, дефрагментированного и виртуального адреса (VA) выделения памяти по запросу.
- Ленивая компиляция
- Соответствует спецификации ES6
- JSI, легкий API для встраивания движка JavaScript в приложения C ++, чтобы упростить переход на Hermes.
Как вы можете видеть на картинке, TTI был уменьшен на 2,29 секунды, размер файла APK уменьшен на 19 МБ, а использование памяти уменьшено на 49 МБ. В результате этого уменьшения произошло существенное улучшение приложений React Native.
Предварительная компиляция байтов
Обычно движок JavaScript анализирует исходный код JS после его загрузки и генерирует байт-код дальше. Этот шаг задерживает выполнение скрипта.
Hermes пропускает этот шаг и использует опережающий компилятор, который работает вместе с процессом сборки приложения и оптимизирует байт-код, тем самым делая его меньше по размеру и более эффективным.
В Hermes байт-код разработан таким образом, что его можно отображать и интерпретировать без чтения всего файла, что приводит к значительному улучшению TTI.
Хотя этот байт-код немного больше, чем сжатый код JavaScript, Гермес уменьшает общий размер приложения для React Native Apps.
Как использовать Hermes в приложении React Native?
Использование Hermes в приложении React Native включает три основных шага:
- Сделайте пакет Hermes npm
- Регистрация этого пакета npm в Yarn
- Связывание Hermes с приложением React Native.
Теперь давайте обсудим, как выполнить все эти задачи.
# Сделайте пакет Hermes npm
Пакет Hermes npm состоит из инструментов CLI для компиляции JavaScript в байт-код и отлаженных версий собственной библиотеки Hermes для Android. Однако, чтобы скомпилировать собственные библиотеки для Android, вам необходимо настроить соответствующую среду разработки.
- Чтобы создать отлаженную версию инструментов Hermes CLI, необходимо выполнить следующие шаги в macOS / Linux -
mkdir hermes_workingdir cd hermes_workingdir git clone https://github.com/facebook/hermes.git hermes/utils/build/build_llvm.py hermes/utils/build/configure.py cd build ninja
- В случае Windows необходимо соблюдать следующие шаги:
mkdir hermes_workingdir cd hermes_workingdir git -c core.autocrlf=false clone https://github.com/facebook/hermes.git hermes/utils/build/build_llvm.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64' --distribute hermes/utils/build/configure.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64 -DLLVM_ENABLE_LTO=OFF' --distribute cd build MSBuild.exe ALL_BUILD.vcxproj /p:Configuration=Release
# Зарегистрируйте пакет с пряжей
- На самом первом шаге вам необходимо выполнить следующую команду для создания кросс-скомпилированного LLVM-
(cd $HERMES_WS_DIR && ./hermes/utils/crosscompile_llvm.sh
- Теперь вы можете создавать библиотеки Hermes для платформ Android и упаковывать все вместе -
(cd $HERMES_WS_DIR/build_release && ninja github-cli-release) (cd $HERMES_WS_DIR/hermes/android && gradle githubRelease) cp $HERMES_WS_DIR/build_android/distributions/hermes-runtime-android-v*.tar.gz $HERMES_WS_DIR/hermes/npm cp $HERMES_WS_DIR/build_release/github/hermes-cli-*-v*.tar.gz $HERMES_WS_DIR/hermes/npm cd $HERMES_WS_DIR/hermes/npm && yarn install && yarn run prepack-dev) cd $HERMES_WS_DIR/hermes/npm && yarn link)
Последняя команда ссылки пряжи зарегистрирует пакет Hermes в пряжи для включения в локальные проекты.
# Свяжите пакет с приложением React Native
Теперь последний шаг - связать пакет npm Hermes с вашим приложением. Предположим, например, что ваш проект находится в каталоге $ user_project, вы должны выполнить следующую команду:
(cd $user_project/node_modules/react-native && yarn link hermes-engine)
Теперь вы можете разработать приложение обычным способом.
Итог
Вы можете загрузить Hermes с Github. Там же есть подробное руководство с инструкциями. Facebook довольно часто использует это конкретное слово «Гермес», но вы наверняка слышали, что Гермес - бог посланников согласно древнегреческой мифологии.
Однако вы можете делать свои собственные предположения. Оставайтесь на связи с нами, чтобы узнать больше Последние технические выпуски.
