vite-bundle-visualizer
vite-bundle-visualizer는 Vite 빌드 시 생성된 번들(bundles)의 시각적인 표현을 제공한다. 이를 사용하여 번들링된 Javascript 파일의 크기, 의존성 그래프, 각 모듈의 상호 작용 등을 시각적으로 확인하여 개발자가 애플리케이션의 번들 구조를 이해하고 최적화할 수 있도록 도와준다. 번들이 너무 크거나 불필요한 의존성이 많은 경우 성능 저하의 원인이 될 수 있으므로, 이를 확인하고 최적화하는 데 유용하다.
Bundle
번들이란 애플리케이션에 포함된 JavaScript 파일들의 집합이다.
내 프로젝트 내에서도 이를 확인해보자!
해당 영역에 마우스를 올리면 정확한 크기도 알 수 있다. 해당 라이브러리는 lodash 라이브러리로, 프로젝트 내부에서 한 군데만 쓰이는데 쓰이는 곳에 비해 아주 넓은 영역을 차지하는 것을 확인할 수 있었다. lodash 라이브러리는 많은 유틸리티 함수들을 담고있는 라이브러리인데 나는 그 많은 함수들 중에서 debounce 함수만을 사용하고 있었다.
이를 개선해보자.
먼저 lodash 라이브러리를 import 해오는 부분을 확인해보니 다음과 같았다.
import _ from "lodash";이는 lodash 라이브러리로부터 모든 기능을 가져오고 이를 _ 라는 이름으로 사용하겠다는 것이며, 이 객체를 통해 lodash 라이브러리의 다양한 함수에 접근할 수 있다.
모든 기능을 import 해오기 때문에 당연히 파일의 크기가 클 수 밖에 없었던 것이다.
따라서 lodash의 모든 기능을 가져오는 대신, 내가 필요한 기능인 debounce 만을 제공하는 lodash.debounce 라이브러리를 사용하기로 했다.
lodash를 지우고, lodash.debounce를 설치하여 다음과 같이 import 하였다.
import debounce from "lodash.debounce";
다시한번 vite-bundle-visualizer를 실행시켜본 결과, 영역을 크게 차지하고 있었던 lodash 라이브러리 부분이 사라진 것을 확인할 수 있었다.
