본문 바로가기
끄적끄적 etc

[Vite]왜 파일 하나만 고쳐도 전체를 빌드할까?

by Dddu 2025. 6. 22.
SMALL

Vue+vite를 사용하고 있다.
배포할 때 마다 파일 하나만 수정했을 뿐인데, 전체를 다시 빌드하여 혹시나 수정하지 않은 파일에 잘못 저장하여 쓰잘데기 없는 글자 하나라도 들어가 있을까봐 병적으로 전체소스 diff 내역 있는지 없는지 확인하는 습관이 있다.

왜 번들링 방식을 사용하는 건지 , vite의 작동 구조를 알아보자


#개발 시

빠른 개발 피드백이 목적이다
브라우저가 ES 모듈 방식으로 필요한 파일만 요청한다
예를 들어 App.vue 파일이 변경되면, 그 파일만 다시 처리해서 반영된다
전체를 묶지 않고, 번들링도 하지 않는다
페이지 새로고침, HMR 속도가 매우 빠르다
-> 개발은 “빠른 반응”이 중요하므로 전체 빌드가 필요 없다.


#배포 시
내부적으로 Rollup 사용
전체 소스를 분석해 최소한의 JS/CSS로 묶음
압축, 난독화, 해시 적용
정적 리소스 최적화까지 포함됨
사용하지 않는 코드 제거
배포를 위한 완전한 결과물 생성

그러면 왜 하나만 고쳐도 전체가 빌드되는가?
Vite는 빌드 시 전체 소스와 의존성 구조를 분석해서
최적화 가능한 모든 지점을 한 번에 계산한다.

파일 하나만 바뀌었더라도,
그 파일이 다른 모듈에 영향을 줄 수 있기 때문이다.

예를 들어,
삭제된 코드가 트리 쉐이킹 대상일 수 있고
변경된 import가 전체 의존성 구조를 바꿀 수 있고
변경된 스타일이 영향을 줄 수도 있다

이런 가능성 때문에, 항상 전체를 다시 빌드해서
일관된 결과물과 최적화를 보장한다

LIST