빌드 도구 비교: Webpack과 Vite의 차이 / 컴파일과 빌드

📌빌드란?

웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다.

 

✔👀 Webpack

가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다.

 

✔👀 Vite

Vite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한 모듈만 로드하여 개발 서버 시작이 매우 빠르며, 변경된 모듈만 갱신하는 HMR을 통해 즉각적인 피드백을 제공한다. 하지만 이로인해 개발환경과 프로덕션 환경이 다를 수 있다는 문제점이 있다.

 

1. 사전 번들링 - 개발 서버 구동이 빠르다!

기존 도구들은 먼저 번들링 된 후에야 서버를 구동할 수 있었기 때문에 모듈이 커질수록 낮은 서버 구동 속도를 가지게 된다. Vite는 외부 라이브러리와 의존성 등을 사전 번들링을 함으로써 Webpack과 같은 기존의 번들러 대비 10~100배 빠른 속도를 제공한다.

2. 내부적으로 ES Module을 사용 - 브라우저가 해석할 수 있다!

Vite는 ES Module을 사용하기 때문에 브라우저가 일부 번들리의 기능을 차지할 수 있게 한다.

 

즉, Vite는 개발 환경에서 매우 빠르기 때문에 개발 경험을 향상시킬 수 있다!

 

*개발 환경과 프로덕션 환경

Vite는 개발환경과 프로덕션 환경에서 다르게 동작한다.

1. 개발 환경:
   • 개발 서버에서는 Hot Module Replacement (HMR)을 활용하여 빠른 반복 개발을 지원합니다.
   • 코드는 필요할 때마다 브라우저에서 동적으로 컴파일되고 제공되므로 빠른 개발 환경을 제공합니다.
   • 브라우저가 요청하는 파일이나 모듈이 변경될 때, 필요한 부분만 다시 컴파일되고 갱신됩니다.
2. 프로덕션 환경:
   • 프로덕션 빌드에서는 Vite는 트리쉐이킹(Tree-Shaking)과 같은 최적화 기술을 사용하여 불필요한 코드를 제거하고 최종 번들을 최적화합니다.
   • 코드 분할(Splitting)을 통해 사용되지 않는 코드는 번들에 포함되지 않도록 합니다.
   • 최종 결과물은 프로덕션 환경에 최적화된 작은 번들로 생성됩니다.

 

📌기타: 컴파일과 빌드

✔👀 컴파일

컴파일은 React 코드(특히 JSX 문법)를 브라우저가 이해할 수 있는 JavaScript 코드로 변환하는 과정이다. Babel과 같은 컴파일러가 JSX를 순수 JavaScript로 변환하는 역할을 한다. 컴파일 단계에서의 주요 목적은 개발자가 작성한 고수준의 코드를 브라우저가 실행 가능한 코드로 만드는 것이다.

이후, Polyfill이 필요한 경우 구형 브라우저에서도 최신 JavaScript 기능을 지원하도록 보완 작업이 추가될 수 있다. 이때 Babel의 @babel/preset-env를 사용하여 구형 브라우저에 필요한 Polyfill만 선택적으로 포함하거나 전체 Polyfill을 추가하는 방식으로 설정할 수 있다. Polyfill을 추가하면 Promise나 Array.prototype.includes와 같은 최신 기능을 지원하지 않는 브라우저에서도 React 코드가 정상적으로 실행될 수 있게 된다.

✔👀 빌드

빌드는 컴파일된 코드와 애플리케이션의 모든 자원을 최적화하고 패키징하여 배포할 수 있는 형태로 만드는 과정이다. Webpack이나 Vite같은 빌드 도구가 이 과정을 수행하며, 코드 압축, 트리 쉐이킹(Tree Shaking), 코드 스플리팅(Code Splitting) 등 최적화 작업을 포함한다.

 

 

https://f-lab.kr/insight/web-development-build-tools-comparison

웹 개발에서의 다양한 빌드 도구 비교: Webpack, Rollup, Vite

https://velog.io/@boyeon_jeong/vite%EA%B0%80-%EC%84%9C%EB%B2%84%EA%B0%80%EB%8F%99%EA%B3%BC-%ED%94%BC%EB%93%9C%EB%B0%B1%EA%B0%9C%EB%B0%9C-%EC%86%8D%EB%8F%84%EC%9D%B4-%EB%B9%A0%EB%A5%B8-%EC%9D%B4%EC%9C%A0

vite가 서버가동과 피드백(개발 속도)이 빠른 이유