www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Hermes - новый движок JavaScript для React Native

Дата публикации Oct 3, 2019

ПоПаял Миттал

Hermes - новый движок JavaScript для React Native

Facebook запустил новый движок JavaScript с открытым исходным кодом под названием «Hermes» для повышения производительности мобильных приложений React Native на Android. Он специально создан для ускорения запуска приложений с использованием статической оптимизации и компактного байт-кода. Это улучшает время запуска, размер приложения и использование памяти приложениями.

Команда Facebook постоянно работала над улучшением JavaScript-кодов и платформ для повышения производительности приложений Facebook. Проанализировав данные о производительности, они заметили, что движок JavaScript сам по себе является существенным фактором для производительности запуска и размера загрузки. Поэтому они работали над оптимизацией производительности JavaScript в более стесненных условиях и разработали «Гермес». Команда еще не планировала расширять проект до браузеров или серверов, таких как NodeJS.

В блоге Facebook написал:

«Hermes улучшает производительность React Native, уменьшая использование памяти, уменьшая объем загрузки и уменьшая время, необходимое для того, чтобы приложение стало работоспособным или« время для взаимодействия »(TTI)».

Как Hermes улучшает реагирование родной производительности?

Гермес улучшает некоторые основные атрибуты приложения, которые обеспечивают его высокую производительность, а именно:

  • Время до взаимодействия (TTI) - оно запускает приложения быстрее, сокращая время запуска путем предварительной компиляции байт-кода.
  • Размер загрузки (APK File Size) - размер меньше, он запускается мгновенно, не отягощая приложение.
  • Сокращение использования памяти
  • Опережающая статическая оптимизация
  • Компилятор без JIT (Just-In-Time)
  • Сжатый байт-код
  • Прекомпиляция байт-кода
  • Стратегия сбора мусора с функциями выделения незаразных, дефрагментированных и виртуальных адресов по запросу (VA).
  • Ленивая компиляция
  • Целевая спецификация ES6
  • JSI, легкий API для встраивания движка JavaScript в приложения C ++ для облегчения перехода на Hermes.
Влияние Гермеса на производительность приложений

Как вы можете видеть на картинке, TTI был уменьшен на 2,29 секунды, размер файла APK был уменьшен на 19 МБ, а использование памяти было уменьшено на 49 МБ. В результате этого снижения были существенно улучшены приложения React Native.

Байтная прекомпиляция

Обычно движок JavaScript анализирует исходный код JS после загрузки и генерирует байт-код в дальнейшем. Этот шаг задерживает выполнение скрипта. Гермес пропускает этот шаг и использует опережающий компилятор, который работает вместе с процессом сборки приложения, оптимизирует байт-код и, таким образом, делает его меньше и эффективнее. В Hermes байт-код разработан таким образом, что его можно отображать и интерпретировать без чтения всего файла, что приводит к значительному улучшению TTI.

Байтная прекомпиляция с Гермесом

Хотя этот байт-код немного больше, чем сжатый код JavaScript, Hermes уменьшает общий размер приложения для React Native Apps.

Как сделать Гермес пригодным для использования в приложении React Native?

Использование Hermes в приложении React Native включает в себя три основных шага:

1) Сделай ГермесНПМпакет

2) Регистрация этогоНПМпакет с пряжей

3) Связь Гермеса с приложением React Native.

Теперь давайте обсудим, как выполнить все эти задачи.

# Сделай ГермесНПМпакет

ГермесНПМПакет состоит из инструментов 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 в Yarn для включения в местные проекты.

# Связать пакет с приложением React Native

Теперь последний шаг - связатьНПМПакет Гермес с вашим приложением. Предположим, например, что ваш проект находится в каталоге$ user_projectвы бы запустили следующую команду:

(cd $user_project/node_modules/react-native && yarn link hermes-engine)

Теперь вы можете разработать приложение в обычном порядке.

Нижняя граница

Вы можете скачать Гермес изGithub, Подробное руководство с инструкциями было предоставлено там же. Фейсбук довольно часто использовал это конкретное слово «Гермес», но вы бы слышали, что согласно древнегреческой мифологии Гермес - бог посланников. Тем не менее, вы можете сделать свои собственные предположения Оставайтесь на связи с нами для болееПоследние технические релизы,

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map