Builder.shin

React Native에서 Hermes 엔진 적용 후 번들 사이즈 40% 감소

문제 상황

커머스 앱의 안드로이드 버전에서 초기 로딩이 3초 이상 소요되는 이슈가 지속적으로 제기되었다. APK 사이즈도 50MB를 넘어서면서 사용자 이탈로 이어지고 있었다.

Hermes 엔진 도입

React Native 0.64부터 Hermes가 안정화되었다는 소식을 듣고 적용을 검토했다. Facebook에서 개발한 JS 엔진으로, 바이트코드 사전 컴파일을 통해 시작 시간을 단축시킨다.

적용 방법

android/app/build.gradle 수정:

project.ext.react = [
    enableHermes: true
]

기존 빌드 캐시 정리 후 재빌드:

cd android
./gradlew clean
cd ..
react-native run-android --variant=release

결과

  • APK 사이즈: 52MB → 31MB (40% 감소)
  • TTI(Time to Interactive): 3.2초 → 1.8초
  • 메모리 사용량: 약 15% 감소

이슈 처리

1. Proxy Polyfill 필요

MobX에서 Proxy를 사용하는데 Hermes는 이를 지원하지 않았다.

yarn add proxy-polyfill

// index.js 최상단
import 'proxy-polyfill';

2. Intl API 미지원

날짜 포맷팅 라이브러리가 Intl에 의존하고 있었다. @formatjs/intl-getcanonicallocales 등의 polyfill을 추가했다.

3. 디버깅 불편

Chrome DevTools 사용이 불가능해졌다. Flipper로 전환했는데, 네트워크 모니터링과 Redux 상태 확인이 가능해서 오히려 만족스러웠다.

결론

안드로이드 성능 개선이 필요하다면 Hermes는 충분히 검토할 가치가 있다. iOS는 JavaScriptCore가 이미 최적화되어 있어 당장은 적용하지 않기로 했다. 일부 polyfill 추가가 필요하지만, 성능 개선 효과가 훨씬 컸다.