?: 앱 크기가 최적화랑 상관이 있나요?
🧚♀️: Yessss!
앱 크기가 작아야 하는 이유
- 용량 때문에 18.7% 사람들이 앱을 제거한다. 개발자는 항상 번들 크기와 앱 용량을 줄이는 데 주의를 기울여야 한다.
WHAT?
코드의 전체 크기에 영향을 미치는 가장 큰 요소 중 하나는 라이브러리이다.
여러 라이브러리를 비효율적으로 사용하고, 원하는 디자인을 위한 커스텀 폰트를 넣다보면 앱의 크기가 커져 앱 속도가 저하됨.
native 앱과 달리 react-native 에서는
1. 메모리에 로드해야 하는 javascript bundle이 포함되어 있음.
2. 로드 후 javascript vm에 의해 구문이 분석되고 실행됨.
번들에 사용되지 않는 코드를 제거해주는 tree shaking 조차 native와 달리 react-native에서는 지원하고 있지 않는다.
tree shaking을 지원하지 않는 건 총 시작 시간에 부정적인 영향을 미칠 수 있음!!
앱이 실행될 때까지 걸리는 시간(로딩시간)은 스마트폰의 속도 성능을 나타내는 주요 지표 중 하나이다.
HOW?
앱 번들 크기를 분석해보자.
react-native에서는 react-native-bundle-visualizer 라이브러리를 사용해서 번들에 추가된 라이브러리의 세부 정보들을 파악할 수 있다.
가장 많이 차지하는 것들을 비교해보자!
라이브러리 설치 & 적용
https://github.com/IjzerenHein/react-native-bundle-visualizer
1. 라이브러리 설치
yarn add --dev react-native-bundle-visualizer
2. 실행
yarn run react-native-bundle-visualizer
3. 실행 후 화면
빌드하면 이런 창이 뜨는 걸 확인 할 수 있다!
ex)
아래는 실제 적용 화면 🙌
가장 큰 용량을 차지하는 라이브러리를 확인할 수 있다.
date-time-format-timezone...
너가 뭔데,,
알고보니 이거 현재 제대로 쓰이지도 않는 라이브러리였음..!ㅋ
찾아보면서 알게된 사이트 공유 ㅎㅎ
https://bundlephobia.com/
들어가서 라이브러리와 버전을 쓰면은 bundle 크기를 알려준다..!!
번들포비아 ㅋㅋ 이름도 웃기다. 잘 지었어 🤔
Bundlephobia | Size of npm dependencies
Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.
bundlephobia.com
오늘도 이렇게 최적화를 위해 힘써보았다.
유저에게 만족스러운 앱이 되는 그날까지,,
to be continue..