Expo의 Hermes로 구축을 해봤어요.

이 글은 스타 인터내셔널의 네 번째 날이다.
어제가 3일째예요. 선생님 거예요사내에서 기술서 윤독회를 하는 이야기입니다.!
나도 윤독회에 참가해서 아주 좋은 코디라고 생각했어!

안부를 묻다


4일째.부탁해!
이번에는 시도해보는 스타일(?)네.
익스플로 SDK43의 하이츠에 Hermes가 iOS에서도 사용할 수 있다는 기록이 있는데 신경 쓰여서 이 기회를 살짝 접해보도록 하겠습니다!

말하자면, 헤르메스는 도대체 무엇입니까?


ReactNative는 최적화된 오픈 소스 JavaScript 엔진을 사용합니다.
허메스가 활성화되면 시작 시간이 개선되고 메모리 사용량이 줄어들며 애플리케이션 크기도 작아진다.
Using Hermes
프로그램 크기가 가벼워지고 시작이 빨라지면...
그렇구나.
Expo SDK 42 중 안드로이드Expo SDK 43에서도 ios를 사용할 수 있다.
Expo SDK 43
Hermes for iOS is not available in Expo Go or in standalone apps built with expo build.
따라서 구축된 응용 프로그램의 크기/시작 속도도 보고 싶습니다!

하고 싶은 일.

  • Hermes를 사용하여 구축 시도
  • 구축 후 응용 사이즈 확인
  • 부팅 속도
  • 실제로 사용해 보세요!


    expo init


    $ expo init example-hermes
    

    SDK 확인


    iOS에서 Hermes가 사용할 수 있는 SDK43이기 때문에 일단 확인해 보겠습니다.
    package.json
    {
      ...
      "expo": "~43.0.2",
      ...
    }
    
    문제 없는 수사

    설치하다.


    공식적인 절차에 따라 설정하다
    Using Hermes Engine - iOS setup
    app.json
    {
      "expo": {
        ...
        "jsEngine": "hermes",
        ...
      }
    }
    

    구축


    eas build을 무료 계정에서 사용할 수 있어서 정말 기쁩니다!
    프로파일 생성...
    생성
    $ eas build:configure
    
    app.json/eas.json구축
    $ eas build --platform all --profile=preview
    
    잠깐만, apk/ipa에서 다운로드할 수 있는 사이트의 URL과 함께
    앱을 설치할 수 있는 QR이 실기에 표시돼 카메라로 읽고 설치했다.
    (Expo가 제공하는 기능 덕분에 기사를 쓸 수 있을 것 같다.)

    확인


    파일 크기
    Hermes
    true
    false
    android(apk)
    26MB
    50.4MB
    ios(ipa,adhoc)
    5.5MB
    4.2MB
    안드로이드에 허메스를 더하면 약 24MB가 줄었다.
    왜 iOS는 허머스를 더하면 1.3MB가 늘어나는 걸까.
    iOS 원래 앱 크기가 작아서 거기서 차이가 났나?
    애플리케이션의 크기가 커지면 결과는 또 바뀔 것 같다.
    시동 속도expo init에 의해 만들어진 최소한의 구조이기 때문에 속도는 변하지 않는다.
    아마 제작된 앱이 확실하다면 차이가 날 거예요.
    언젠가 확인할 수 있는 타이밍이 오면 검증하고 싶어요!

    최후


    익솔로 허메스를 가볍게 봤죠.
    앱이 너무 작아서 허메스 효과를 실감하지 못했다
    설정 파일에 조금만 보충하면 가져올 수 있습니다. 기존 프로그램에서 가져올 기회가 있으면 시작 속도와 프로그램 사이즈도 확인하고 싶습니다!
    모두들 Hermes의 응용 엔지니어를 매우 마음에 두고 있다!
    살짝 해보면 재밌을 것 같아!
    소감도 듣고 싶어요!

    참조 링크 세트

  • https://hermesengine.dev/
  • https://reactnative.dev/docs/hermes
  • Using Hermes Engine
  • 좋은 웹페이지 즐겨찾기