현재 작업중인 프로젝트의 최적화에 대해 고민하던 중, 프로젝트에서 사용중인 라이브러리들의 번들 사이즈에 대해 궁금해서 npm, npm trends, bundle phobia에 각각 검색해보았는데, 각각 Unpacked size, Minified size, Gzipped와 같이 서로 다른 정보를 보여주고 있어서 그 차이점에 대해 알아보게 되었다.
npm, npm trends, budle phobia 에서 제공하는 데이터
위 사진처럼 npm에 검색하면 Unpacked size에 대한 정보를 알 수 있다.
bundle phobia에 검색하면 minified size와 minified 이후 gzipped까지 적용된 size를 알 수 있다.
npm trends에 검색하면 minzipped size에 대한 정보가 나타난다. 여기서 minzipped size는 budle phobia의 minified + gzipped size와 같다.
각각 데이터가 의미하는 바
-
Unpacked Size : 패키지를 설치 하였을 때, node_modules 폴더에 풀리는 실제 라이브러리의 용량을 뜻한다. 위의 이미지처럼 node_modules 디렉토리의 recoil 폴더 용량을 확인해보면 2.2메가바이트라는 것을 확인할 수 있고, 실제 npm에 recoil을 검색해보면 unpacked size가 2.21MB로 나타난다.
참고 : https://stackoverflow.com/questions/74176673/meaning-of-unpacked-size-in-npm-and-how-can-i-reduce-it/74176753 -
Minified Size : 패키지의 JavaScript 코드가 최소화되고 불필요한 공백이나 줄 바꿈이 제거된 상태를 나타낸다.
-
Minified + Gzipped Size : Minified된 코드가 Gzip 알고리즘을 사용하여 추가로 압축된 결과를 나타낸다.
그렇다면 무엇을 봐야 하는가
개발자의 관점과 서비스를 사용하는 이용자의 관점에서 각각 봐야하는 데이터가 다르다고 할 수 있다.
Unpacked Size는 결국 개발 환경에서의 용량을 뜻하기 때문에, 개발자가 아닌 서비스 이용자들은 여기에 연관점이 하나도 없다.
하지만 이용자가 페이지에 처음 접근했을 때 불러오는 jsbundle파일의 크기는 Minified + Gzipped Size에 영향을 받는다. jsbundle의 크기가 지나치게 커지면 사용자의 UX에 악영향을 줄테니 당연히 Minified + Gzipped Size가 가벼우면 더 유리하다.
