[ React Native ] Memory Leak / Memory 초기 사용량 낮추기

현재 회사에서 서비스하고있는 앱은 회사에서 설치한 테블릿에서만 도는 앱이다.

 

테블릿은 4GB 램을 사용중이다.

 

대부분의 사용자가 일주일에 한번씩은 앱을 종료하였지만,

 

앱을 설치하고 한번도 앱을 종료하지 않은 매장에서 memory leak 으로 인한 다운이 발생하여 해결하게 되었다.

 

 

다른 일반 앱들과는 다르게, 상점별 세팅 / Van사의 앱 프로토콜 / 수백개의 메뉴이미지로, 초기 메모리가 350MB 정도 되었다.

 

GC 가 돌긴하였지만, 30분만에 300메가 정도가 늘어난 것으로 관찰된다.

 

 

최종 개선된 버전을 보면, 초기메모리가 243MB 로 낮아졌을뿐만아니라, 메모리가 260~290MB 로 유지되는것을 확인할수있었다.

 

해당 개선을 하였던 방법을 포스팅하고자한다.

 

당면과제는 두가지였다.

 

1.초기의 메모리값을 낮춘다.

2.앱을 켜놓아도 메모리값을 적정수준으로 유지한다.

 

해당 과제중

 

1.초기 메모리값을 낮추기 위해

 

-Hermes 엔진 활성화
-ABI 분리 (arm64-v8a 로만 빌드)
-번들 크기 최적화 (package.json에서 사용하지 않는 패키지를 제거)
-이미지관리 최적화(동적 이미지 FastImage)
-이미지관리 최적화  (아이콘 svg 사용)

 

해당 작업을 하였다.

 

해당 작업이후의 메모리사용량을 보면,

 

일단 초기 메모리 사이즈가 많이 감소된것을 관찰할수있다.

 

두번째 작업은

 

-이미지관리 최적화 (정적 이미지 용량절감) : png 리소스 webp 로 변경

 

였다. 리소스들 자체를 webp 로 변경하니

 

 

해당 리소스의 크기가 줄어든만큼 초기 메모리 사용량이 줄어든 것을 확인하였다.

 

세전째 작업은

 

-Proguard/R8 관련 작업이었다.

 

해당 작업은 난독화와 관련되어 메모리와 크게 상관이 없을줄 알았는데

 

 

해당 내용 작업후, 4MB정도의 감소폭을 확인 할 수 있었다.

 

앱의 특성상 초기 메모리를 더욱 낮출수는 없다고 판단하여

 

이제 Memory Leak 관련된 작업을 시작했다.

 

해당 메모리 누수가 일어나는 부분은 '광고'화면 이 주를 이뤘다.

 

처음 작업은

 

1.interval 조건추가
2.backgroundImage key 추가
3.debug 로그제거
4.fastimage key 추가
5.lazy video 로직 변경
6.arm64 만 빌드되도록 수정
7.mmkv 패키지 삭제
8.안쓰는 import 제거 / lodash partial import

 

이었는데,

 

대표적인 memory leak 이 일어나는 interval 함수 사용의 로직을 개선하였다.

Native / Others 쪽 메모리가 쌓이는것을 보고 backgroundImage / FastImage 에 key 값을 추가하여, unmount 되는것을 확실히하였고,

filesystem을 이용하는 debug로그와, video 쪽을 손봤다. 

소스코드를 정리하면서 package 쪽을 정리하니

 

 

초기 메모리 사용량은 비슷하지만, 기하급수적으로 메모리 쌓이는 부분이 해결되는 것을 확인했다.

 

두하지만, 여전히 300MB 를 넘는 사용량을 보이기에

 

FastImage 쪽 Glide 의 cache 컨트롤 쪽을 개선하였다.

 

- 메모리 캐시 크기 지정 : 20MB
- 이미지 Bitmap 처리 포맷 변경 : RGB565 사용하도록 설정

 

해당 작업이후

 

 

최종적인 메모리 사용량은 안정적으로 되었고,

 

해당 문제가 발생했던 매장에 설치하여 모니터링중이다.