필요한 편리한 기능을 하나 둘 가져와 쓰다 보면 프로젝트에 얼마나 많은 라이브러리가 사용되는지? 이게 얼마나 크고 무거운 것인지를 잊게 됩니다. 가끔씩 필요한 것만 사용하고 있지는 생각해봐야 합니다. 그다음에는 덜어내는 과정으로 추려낸 것들을 더 가볍게 쓸 수는 없을지를 고민해보세요. 이 과정에서 많은 걸 얻게 되실 겁니다.

# 지금 상황을 눈으로 확인하기

프로젝트에 react-native-bundle-visualizer 모듈을 설치하고 실행해보세요.

$ yarn add --dev react-native-bundle-visualizer@next
$ yarn run react-native-bundle-visualizer

웹브라우저가 열리면서 아래처럼 사용하고 있는 모듈들의 비중이 표시되고 드릴다운 하면서 살펴보실 수 있어요.

# react-native-firebase 다이어트

많은 분들이 이 라이브러리는 거의 다 사용하실 것 같은데요. 이 라이브러리를 가볍게 만드는 과정을 설명하면 가장 와닿을 것 같네요.

1. 새롭게 프로젝트 만들고 visualizer 실행

$ react-native init BundleDiet
$ cd BundleDiet
$ yarn add --dev react-native-bundle-visualizer@next
$ yarn run react-native-bundle-visualizer
....
....
**Bundle is 0.58 MB in size**

2. 모듈 설치하고 visualizer 재실행

$ yarn add react-native-firebase

// App.js
.....

import firebase from 'react-native-firebase';

const App = () => {

$ yarn run react-native-bundle-visualizer
....
....
**Bundle is 0.75 MB in size (+++ has increased with 181400 bytes since last run)**

react-native-firebase를 사용하면서 번들 크기가 0.75MB로 늘어났습니다. 생각보다 볼륨이 엄청난 녀석이었네요.

조금 배우신 분이라면 "import만 하고 실제로 사용하지도 않았는데 트리쉐이킹(Tree Shaking)으로 Bundler에서 제거되어야 하는 거 아닌가요?"라고 생각할 수 있지만 아쉽게도 React Native에서 사용되는 Metro에서는 이게 아직 불가능합니다.

Github Issue : Tree shaking while bundling #227