웹사이트 속도는 고객 획득에 영향을 준다.

바이트별로 보면, 자바스크립트는 같은 크기의 이미지나 웹폰트보다 브라우저가 처리하는 비용이 많이 듭니다. - Tom Dale

원인 찾기

용량이 큰 라이브러리는 더 가벼운 라이브러리로 대체하고 겹치는 라이브러리는 하나의 라이브러리로 통일하는 것이 번들 용량을 줄이는 시작입니다.

그런데 종종 같은 라이브러리인데 버전이 다르게 들어가 있는 경우들이 있다.

우리가 사용하는 라이브러리들이 서로 다른 버전의 동일 라이브러리를 참조하는 경우가 있다. 이를 Dependency conflict 라고 한다.

Dependency conflict

패키지 매니저마다 이 문제를 다양한 방식으로 해결합니다.

예를 들어, 더 높은 버전의 라이브러리를 사용하거나 사용자에게 어느 버전을 설치할지 확인 받는 경우가 있다.(Browserfiy)

npm은 트리구조로 모든 버전을 받는 식으로 동작한다. npm 방식은 dependency를 더 편하게 관리하고 작성자가 의도한 버전대로 동작하는 효과를 얻을 수 있다. 그러나 중복된 라이브러리가 쌓여 번들 사이즈가 커지게 된다.

과도하게 번들이 커지는 것을 방지하기 위해 npm은 라이브러리들이 시맨틱 버전 sember를 지킨다고 가정하여 높은 버전만 받아 중복 기능을 막는다. 이를 통해 모든게 해결되진 않는다. 그래서 npm에선 dedupe 이란 명령어를 제공한다.

dedupe 을 사용하면 설치때 놓친 중복된 라이브러리의 버전을 확인하고 적합한 버전으로 통합할 수 있습니다. 그런데 yarn을 사용하는 경우는?

yarn은 라이브러리 설치과정에서 완벽하게 처리해 주기 때문에 신경쓸 필요가 없다고 말한다. 그런데 실제로는 완벽하진 않다. toss팀은 yarn을 사용하지만 query-string 라이브러리가 중복되어 들어간 것을 보았다.