Builder.shin

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

배경

회사 앱의 초기 로딩 시간이 4초 이상 걸려서 사용자 이탈률이 높다는 피드백이 있었다. Android는 작년에 Hermes를 적용해서 개선했지만, iOS는 미루고 있었다.

React Native 0.64부터 iOS에서도 Hermes를 공식 지원한다는 소식을 듣고 적용을 결정했다.

적용 과정

Podfile 수정

use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

pod install 재실행

cd ios
pod install

기존 JavaScriptCore 대신 Hermes 엔진이 링크된다.

결과

iOS 기준

  • 앱 번들 사이즈: 12.3MB → 7.2MB (41% 감소)
  • 초기 로딩 시간: 4.2초 → 2.1초 (50% 개선)
  • 메모리 사용량: 평균 15% 감소

주의사항

일부 네이티브 모듈에서 Proxy 객체 사용 시 이슈가 있었다. react-native-reanimated가 대표적인데, 2.3 버전 이상으로 올리니 해결됐다.

// Hermes에서 Proxy 체크
if (global.HermesInternal) {
  console.log('Hermes enabled');
}

마무리

Hermes 적용으로 앱 성능이 크게 개선됐다. Android에 이어 iOS도 적용 완료해서 양쪽 플랫폼 모두 동일한 JS 엔진을 사용하게 됐다. 다만 디버깅 환경에서는 Chrome DevTools를 쓸 수 없고 Flipper를 써야 한다는 점은 아쉬웠다.