Vite의 Minification

최근에 Vite를 조금씩 써보면서 공부하는 과정에서, Minification이라는 최적화 기법에 대해서 처음 알게 되었습니다.
(Minification - JavaScript 코드 빌드 과정에서 코드에서 공백, 주석 등을 제거하고 변수/함수 이름을 줄여서 파일 크기를 최소화하는 기법)

Minification의 경우 대부분의 번들러 설정에서 활성화/비활성화가 가능하다고 하여 Minification을 활성화한 빌드 결과물과 활성화하지 않은 빌드 결과물이 어떤 차이가 있을지 궁금해 비교해보았습니다.

테스트 결과 크게 빌드 결과물 크기와 코드 구성이 어떻게 다른지 볼 수 있었습니다.

빌드 결과물의 크기 차이

Minification이 빌드 결과물의 크기를 줄이는 것이 핵심 목적이라고 하여, 빌드 결과물의 크기를 비교해보았습니다. (아래 사진에서 위가 minification이 적용된 빌드 결과, 아래가 적용하지 않은 빌드 결과입니다.)

거의 아무런 코드가 없는 보일러플레이트 상태의 프로젝트에서도 minification 여부에 따라 거의 100kb의 크기 차이가 발생하는 것을 확인할 수 있었습니다.

빌드 결과물의 코드 구성 차이

코드가 Minification을 통해서 어떻게 처리되길래 크기가 이렇게 차이가 나는지 궁금해서 코드 구성을 살펴보았습니다.

[ Minification이 수행되지 않은 경우 ]

번들링 과정에서 Minification 작업 없이 생성된 .js 파일은 아래와 같이 공백이나 줄바꿈이 적절하게 존재하는 일반적인 형태의 JavaScript 코드로 보이며, 개발자가 작성한 변수나 함수 이름도 그대로 유지되어 번들링 된 것을 확인할 수 있었습니다.

[ Minification이 수행된 경우 ]

반대로 Minification 작업이 치리되어 생성된 .js 파일의 경우 공백이 많이 제거되고, 변수나 함수 및 컴포넌트 이름도 단축된 형태로 변경된 것을 확인할 수 있었습니다. (아래 사진에서 밑줄 친 부분은 Minification이 수행되지 않은 코드 상에서 function Title() {}에 해당되는 코드입니다. 컴포넌트 함수 이름 Title()이 Uc()로 변경되었음을 볼 수 있습니다.)