React Native Hermes를 적용했는데 Codepush 받고 왜 느려지지?

📒 Hermes를 적용했는데 Codepush 받고 왜 느려지지?

---

React Native 앱에 Hermes를 적용하고 나서 콜드 스타트(cold start)가 확실히 빨라졌다고 느꼈는데, CodePush 업데이트를 받고 나서 뭔가 예전처럼 느려진 것 같은 기분이 드는 겁니다.

 

플라시보인가 싶었지만 그냥 넘기기엔 찜찜해서 바로 파봤습니다.

 

📌 Hermes가 왜 빠른가

Hermes 엔진은 Meta에서 React Native를 위해 만든 JavaScript 엔진입니다.

 

기존 JavaScriptCore(JSC)와의 결정적인 차이는 빌드 시점에 JS 코드를 미리 바이트코드(Bytecode)로 컴파일해 둔다는 겁니다.

 

앱 실행 시 JS 파싱·컴파일 과정을 건너뛰고 바로 바이트코드를 실행하기 때문에 콜드 스타트가 빨라집니다.

 

런타임에 할 일을 빌드 타임에 미리 해두는 거죠.

 

📌 CodePush 후 뭔가 이상하다

Hermes의 빠름은 결국 바이트코드 번들에서 나옵니다.

 

그런데 코드 푸시(CodePush)로 업데이트된 번들이 바이트코드가 아닌 일반 JS 텍스트라면 어떻게 될까요.

 

상황을 정리하면 이렇습니다.

• 앱 최초 설치: APK 내부에 Hermes 바이트코드 번들 포함 → 빠름
• CodePush 업데이트 이후: JS 텍스트 번들로 교체 → Hermes 이점 사라짐

Hermes를 공들여 적용해 뒀는데, CodePush 한 번에 효과가 날아가는 상황입니다.

 

📌 번들 타입 직접 확인하기

추측으로 끝내지 않으려면 번들 타입을 직접 확인해야 합니다.

 

iOS는 파일 시스템 접근이 제한적이라 번들을 꺼내 보기가 까다롭지만, Android는 APK를 압축 해제하거나 adb shell로 기기에 직접 접근할 수 있어 확인이 훨씬 쉽습니다.

 

Android 기준으로 두 가지를 봤습니다.

 

APK에 들어있는 기본 번들과, CodePush가 내려받은 번들.

 

🔎 번들 파일 직접 확인

우선 타입 확인 전 번들을 직접 읽어 본다면 어떤 모양일지 궁금해 비교해봤습니다.

 

그냥 딱 봐도 구분이 되죠?

 

• JS 번들

 

• 바이트코드 번들

 

그럼 이제 번들을 직접 확인해보겠습니다.

 

🔎 APK 번들 확인

APK 파일이 있는 경로에서 압축을 풀어줍니다.

$ unzip app-release.apk

압축을 풀면 assets/index.android.bundle이 번들 파일입니다. file 명령어로 타입을 확인합니다.

$ file assets/index.android.bundle

결과는 아래 둘 중 하나로 나옵니다.

 

• Hermes JavaScript bytecode, version 96 → Hermes 바이트코드 (정상)
• ASCII text → 일반 JS 번들

기본 번들이 바이트코드로 나온다면 Hermes 설정 자체는 문제가 없다는 뜻입니다.

 

그럼 다음은 CodePush 번들을 확인할 차례입니다.

 

🔎 기기에 내려받은 CodePush 번들 확인

CodePush 번들은 기기 로컬에 저장되기 때문에 adb shell로 직접 접근해야 합니다.

 

접근하려면 앱이 debuggable 모드여야 합니다. android/app/src/main/AndroidManifest.xml을 수정한 뒤 빌드합니다.

<application
    ...
    android:debuggable="true"
>

빌드 후 쉘로 접근합니다.

$ adb shell
$ run-as com.yourapp.package
$ cd /data/user/0/com.yourapp.package/files/CodePush/{해시값}/CodePush
$ file index.android.bundle

경로의 해시값은 번들마다 달라집니다.

 

여기서 ASCII text가 나온다면 CodePush가 Hermes 바이트코드가 아닌 JS 번들을 내려보내고 있는 겁니다.

 

원인이 잡혔습니다.

 

확인하니 ASCII text로 표시 됐고, 코드푸시로 받은 번들이 JS 번들이었습니다.

 

📌 해결: 명령어 한 줄

원인을 찾는 데 시간이 꽤 걸렸는데, 해결은 허무할 만큼 간단했습니다.

 

CodePush 배포 명령어에 -useHermes 옵션을 추가해주기만 하면 됩니다.

$ code-push-standalone ... -useHermes

이 옵션이 없으면 CodePush는 Hermes 바이트코드가 아닌 일반 JS 번들을 그냥 배포합니다.

 

옵션을 붙이면 배포 전에 Hermes로 번들을 컴파일해서 올려줍니다.

 

배포 후 동일한 방법으로 번들 타입을 다시 확인하면 Hermes JavaScript bytecode, version 96이 출력되는 걸 볼 수 있습니다.

 

---

원인 분석에 이것저것 파느라 시간을 꽤 쓴 것 치고는 해결이 너무 싱겁게 끝났네요.

 

CodePush + Hermes 조합을 쓰고 있다면 배포 명령어를 꼭 한 번 점검해보시길 권합니다.

 

Hermes를 빌드에 적용했다고 끝이 아니라, CodePush 배포 시에도 -useHermes 옵션이 빠져 있지 않은지 반드시 확인하시기 바랍니다.