node_modules, 패키지 크기가 작아지면 좋은 점이 뭘까?

프론트엔드에서 서비스를 개발할 때, 성능 최적화, 패키지 경량화라는 말을 들어본 적이 있을 것이다.

node_modules 폴더의 크기를 줄이는 패키지 경량화를 하면 어떤 이점이 있는 것일까?

 

패키지 경량화 이점

직관적으로 생각해봤을 때, 다운받아야하는 패키지의 크기가 줄어들기 때문에 설치 속도가 빨라질 것이라고 예상할 수 있다.

• 설치 속도가 빨라지면 CI / CD 환경에서 설치가 더 빨리 끝나서 배포 속도가 빨라진다.

 

그리고 패키지 크기가 작아지게 되면 번들 사이즈가 작아질 가능성이 높아지는데 번들 사이즈가 작아지면 성능에 큰 이점이 있다.

"패키지 크기가 작아지면 사이즈가 작아진다 !" 라고 확신할 수 없는 이유

데드 코드 제거

트리 쉐이킹

트리 셰이킹(Tree shaking) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

번들링 최적화 과정에서 사용되는 트리 쉐이킹, 데드 코드 제거를 통해 사용되는 코드들만 번들에 포함시키기 때문에 패키지 크기가 커도 번들링 사이즈는 작을 수 있기 때문이다.

 

** 트리 쉐이킹(Tree-Shaking), 데드 코드 제거(Dead Code Elimination) : 사용하지 않는 코드를 제거하는 최적화 기술 (JavaScript 맥락에서 죽은 코드 제거)

 

 

번들 사이즈가 작아졌을 때의 이점

1. 페이지 로딩 시간이 단축된다.

- 클라이언트가 서버에서 파일을 다운로드하는 시간이 짧아진다.

- 사용자 경험이 좋아지고, SEO 점수에도 번들 사이즈가 클 때에 비해 긍정적인 영향을 준다.

    => 파일 크기와 다운로드 시간은 비례 관계다.

 

2. 초기 로딩 속도가 향상된다.

- 초기 렌더링 (TTFB, FCP)이 빨라져서 사용자에게 콘텐츠를 더 빠르게 보여줄 수 있다.
- 특시 싱글 페이지 애플리케이션(SPA)에서는 첫 화면 로드 속도가 크게 향상된다.

    => 브라우저는 자바스크립트를 읽고 실행할 때, 번들 크기가 작을 수록 초기 화면을 더 빨리 보여줄 수 있다.

 

3. 네트워크 비용이 절감된다.

- 특히 클라우드 기반의 CDN(Content Deliveery Network)을 사용할 때 전송량이 감소되기 때문에 비용적인 이점이 있다.
- 사용자 데이터도 절약할 수 있기 때문에 모바일 환경에서의 사용자 만족도를 올릴 수 있다.

    =>  CDN 비용 및 데이터 사용량은 전송량에 의해 결정된다.

 

 

 

 이렇게 패키지의 크기가 작아지면, 번들 사이즈가 작아질 '수도' 있고 번들 사이즈가 작아지면 위와 같이 여러 이점이 있다는 것을 알게 되었다.

그렇지만...그 말은 즉, 패키지 크기만 작아졌을 때의 이점은 CI / CD 환경에서의 배포 속도가 빨라지는 것 뿐 아니야? 라고 할 수 있겠지만, 불필요한 패키지 사용을 지양하고, 필요한 함수만 다운받아 사용하는 습관을 들이는 것은 장기적인 관점에서 바라보았을 때 좋은 습관이 될 것이다.

 

흠....패키지에 대해서도 한 번 깊게 공부를 해봐야할 것 같다.

지금은 잘 이해했다는 생각이 안든다. 관련해서 좋은 책 아시는 분이 있으시다면 추천해주세요 !

 

그럼 오늘은 이만~!

안뇽 !

 

 

•