Babel과 Webpack 그리고 Vite +a

https://news.hada.io/topic?id=21430

 

위 글을 읽고 Next.js15.1+ 부터는 Vercel에 묶여있다는 말에 그게 무엇인가! 왜 Vite를 못쓴다고 난리인지 찾아보는 과정에서 번들링, 트랜스파일, 빌드 개념을 다시 잡았습니다.

 

IE와 같은 구형 브라우저는 JavaScript의 최신 표준인 ESM(ECMAScript Modules)을 지원하지 않습니다. 또한 ES6 이상의 문법(예: 화살표 함수, 지수 연산자 등)도 제대로 동작하지 않기 때문에, 이러한 브라우저 환경에서 최신 문법으로 작성한 코드를 실행하려면 추가적인 개발 환경 설정이 필요합니다.

대부분의 현대 브라우저는 ESM을 지원하지만, 여전히 실무에서는 모듈 로더나 번들러를 사용하는 것이 일반적입니다. 특히 다양한 환경을 지원해야 하는 경우, 트랜스파일링과 번들링 과정은 필수적입니다.

---

1. Babel (트랜스파일러)

• Babel은 ES6 이상 또는 ES.Next 사양의 소스 코드를 ES5 이하의 하위 버전 코드로 변환(트랜스파일링)해주는 도구입니다.
• 이를 통해 구형 브라우저에서도 최신 문법으로 작성된 코드를 문제없이 실행할 수 있도록 합니다.

---

2. Webpack (모듈 번들러)

• Webpack은 여러 개의 모듈(파일)을 하나의 파일로 묶어주는 번들러입니다.
• Babel과 함께 사용하면, 최신 JavaScript 코드도 구형 브라우저에서 작동 가능하도록 트랜스파일링 및 번들링할 수 있습니다.
• 번들링 덕분에 HTML에서 <script> 태그로 여러 파일을 일일이 불러올 필요가 없고, 별도의 모듈 로더도 사용하지 않아도 됩니다.
• 결과적으로 코드 관리가 용이해지고 성능도 개선됩니다.

---

3. Next.js (React기반 웹 프레임워크)

- 프레임 워크란 기능 구현을 위해 어느정도 함수와 규칙 뼈대들이 있는 구조를 뜻합니다.

- 트랜스파일링은 Rust기반의 SWC, Webpack으로 번들링 합니다.

 

React+Vite

- 그에비해 Vite는 프레임워크가 아닌 개발 도구 & 번들러 입니다. 

- React 개발환경을 커스텀 할 때 고르는 도구입니다.

- Vite는 빌드시에만 Roll Up으로 번들링 사용, esbuild로 트랜스 파일링을 합니다.

 

🔍 정리해서 비교해보자면

기능	Webpack	Vite
개발 서버 제공	webpack-dev-server	내장 개발 서버
핫 리로딩(HMR)	있음 (느릴 수 있음)	있음 (엄청 빠름)
모듈 번들링	자체 번들링 엔진	개발 중에는 안 함빌드 시 Rollup 사용
트랜스파일링	Babel, TypeScript 등 로더로 처리	esbuild로 초고속 처리
최종 빌드 출력	번들 파일 (dist/)	Rollup으로 번들 후 dist/ 출력
대상	대규모 앱, 복잡한 설정이 필요한 프로젝트	빠른 개발 경험, 간단한 설정

 

둘 다 번들링 및 빌드 도구 인데

Webpack : 모든걸 직 접 제어 가능하게 하자 (높은 커스텀, 단 설정 복잡)

Vite : 빠르고 간단하게 시작하자 (자동화된 최적화) 

라는 차이가 있습니다.

4. esbuild

번들러 성능 비교표

 

주요 특징

- 캐시가 필요하지 않은 엄청 빠른 스피드

- js, css, ts,그리고 jsx 빌트인

- CLI, JS, Go를 위한 간단한 API

- ESM과 CommonJs 둘다 번들링

- css모듈을 포함한 css 번들

- 트리쉐이킹, minification, source maps

- local server, watch mode, plugins

 

 1. 왜 esbuild는 그렇게 빠른가?

1. Go 언어로 작성됨 (네이티브 빌더)

• Go는 JIT(Just-In-Time:실행중에 코드를 컴파일하는 방식) 없이 네이티브 코드로 컴파일되므로 실행 속도가 빠름.
• 반면 Webpack 같은 대부분의 번들러는 JavaScript로 짜여 있음 → Node.js가 먼저 자기 코드를 해석하느라 느림.

2. 병렬 처리에 강함 (Go 덕분)

• Go는 멀티스레드 환경에서 공유 메모리를 사용함.
• 반면 JS는 Web Worker에서 메모리 공유가 안 되고 직렬화해서 데이터를 주고받아야 해서 느림.
• esbuild는 파싱, 코드 생성 등 거의 모든 단계를 멀티코어로 병렬 수행.

3.  모든 기능을 직접 구현함 (No 의존성)

• 대부분 번들러는 외부 라이브러리(TypeScript, Babel 등)를 조합해서 쓰는데,
• esbuild는 모든 걸 직접 구현해서 데이터 변환 횟수를 줄이고 성능 극대화.

4.  AST (Abstract Syntax Tree) 를 한 번만 순회함

• 보통 번들러는 여러 번 AST를 순회하며 변환하는데,
• esbuild는 딱 3번의 패스로 처리 → CPU 캐시에 잘 머무르고 빠름.

5. 메모리 효율이 좋음

• Go는 객체를 압축 저장하고, 중간에 포인터 없이 직접 값으로 embed할 수 있어 메모리 적게 사용.
• JS는 부정확한 타입, 숨은 클래스 등으로 메모리 낭비가 큼.

 

5. Vite는 어떻게 동작하는가?

Vite는 개발 모드와 빌드 모드에서 사용하는 도구가 다르다.

 

단계	사용하는 도구	역할
개발 모드 (vite dev)	esbuild	트랜스파일러 (TS, JSX → JS) + 빠른 모듈 변환 및 HMR
빌드 모드 (vite build)	Rollup	번들링, 코드 스플리팅, 최적화, 압축 등

개발시엔 esbuild를 이용해서 ts->js로 트랜스 파일링만하고 브라우저에 esm 모듈 그대로 전달(번들링 x 트랜스파일러로만 사용)

빌드시엔 내부적으로 RollUp호출 -> 번들링, 코드스플리팅, 트리쉐이킹, CSS추출, 압축(Minigy), 해시추가 등 동작

 

esbuild로도 빌드 및 번들링 할 수 있지만 css처리 코드스플리팅, 플러그인 생태계는 RollUp이 더 강하다고 한다.

 

 

6. RollUp은 무엇인가?

- RollUp은 Javascript로 작성된 모듈번들러다.

- esbuild에 비하면 느리지만 최적화가 잘되어있고 코드스플리팅, 트리쉐이킹, 플러그인 시스템등이 더욱 강력하다고 한다.

- css처리도 postCss나 Plugin등으로 처리하는 등 유연한 것 같다. 정적인 웹 앱이나 라이브러리 빌드할 때 많이 쓰인다.

 

(esbuild가 퍼포먼스가 더 좋다고 해도 css처리등에서 약세를 보인다. 하지만 미친듯이 빠르기 때문에 (GO덕분에) dev모드에서 사용한다.

 

간단히 알아봤다. 끝

 

Reference

https://rollupjs.org/faqs/#what-is-tree-shaking

Frequently Asked Questions | Rollup

https://webpack.kr/

webpack

https://esbuild.github.io/faq/#why-is-esbuild-fast