Webpack? Vite? Pacel? 번들러란?

조팔로·2023년 2월 8일

프론트엔드에 관련된 글들을 읽다보면 webpack vite parcel 라는 단어들을 한 번씩 보신 경험이 있으실 것 같습니다. 저 또한 대강 번들링을 도와주는 도구 라고만 알고 있었는데 이번 기회에 내용을 정리하여 더 자세히 알아갈 수 있다면 좋겠습니다.

번들러가 무엇인가요? 👀

이곳에서는 Javascript 를 기준으로 설명하도록 하겠습니다.

번들러는 많은 Javascript 코드 파일을 하나의 파일로 결합하여 브라우저에서 바로 로드 할 수 있는 개발 도구입니다. 쉽게 말하자면 여러 개의 파일을 하나의 파일로 묶어주는 도구 라고 할 수 있습니다.

여러가지 예시 / 사진으로 번들러를 알아보겠습니다.

번들러 이미지

브라우저 환경에서는 CommonJS나 일부 ES6 Module 로 작성된 코드는 바로 실행할 수 없기 때문에 모듈 코드를 분석하고 자바스크립트 모듈 스펙에 따라 새로운 코드로의 가공이 필요합니다. 이때 가공해주는 것이 바로 번들러의 역할입니다.

번들러 사용 전

<head>
	<script type="text/javascript" src="/nav.js">
	<script type="text/javascript" src="/crud.js">
	<script type="text/javascript" src="/main.js">
</head>

번들러 사용 후

<head>
	<script type="text/javascript" src="/bundle.js">
</head>

이처럼 번들러는 첫 번째 코드 파일을 통과할 때 의존 관계와 서드파티 의존 관계를 추적하여 의존 관계 그래프를 생성하고 의존 관계 그래프는 모든 소스 및 관련 코드 파일을 최신 상태로 유지하며 오류 없이 유지할 수 있도록 합니다.

번들러는 어떻게 작동할까요?

전체적으로 번들러의 동작은 의존관계 그래프 생성 과 최종 번들링 두 단계로 나뉩니다.

의존관계 그래프 매핑

모듈 번들러는 제일 먼저 모든 서비스 대상 파일의 관계 맵을 생성하는데 이 프로세스를 종속성 해결(Dependency Resolution)이라고 합니다.

모듈이 종속성 순서를 구성할 수 있게 됨
이름 경합(중복)을 방지할 수 있게 됨
사용하지 않는 파일을 검출하여 불필요한 파일을 제거할 수 있게 됨

최종 번들링

종속성 해결 단계 이후 번들러는 브라우저가 정상적으로 처리할 수 있는 정적 자산을 전달하는데 이를 패킹(Packing)이라고 합니다.

이 프로세스 동안 번들러는 위에서 생성한 의존관계 그래프 를 활용하여 여러 코드를 통합하고 필요한 함수를 삽입하고 브라우저에서 정상적으로 로드할 수 있는 단일 실행 파일 번들을 반환합니다.

번들러의 종류

번들러는 정말 많은 종류가 있습니다. RequireJS, Browserify, Rollup, Parcel, Webpack, Vite 등등..

이곳에서는 상위 번들러 Parcel Webpack Vite 3가지에 대해서 간단히 알아보고 지나가보도록하겠습니다.

Parcel

플러그 앤 플레이 방식의 제로 구성 빌드 툴
자산 트리 구성 → 번들 트리 구성 → 패키징 순으로 작동된다.

ℹ️ 장점

제로 구성 (Zero configuration)
- 개발자에게 신속한 웹 개발에 필요한 고성능 아키텍처를 제공한다.
- webpack 등의 멀티 에셋 서포트도 존재한다.
빠르다.
- 프리미엄 리소스 최적화 기능을 빠르게 제공한다.
- webpack 보다 빠르다.

ℹ️ 단점

고도의 커스터마이즈 기능이 없다.

Webpack

현재 가장 인기 있는 Javascript 모듈 번들러
static module bundler로서 고도의 커스터마이즈 기능을 갖추고 있다

ℹ️ 장점

멀티 리소스 지원
- javascript 파일 뿐만 아니라 css나 이미지 등의 다른 파일을 번들하기 위해 사용하는 플러그인이 풍부하게 존재한다.
자산 최적화
- HMR 기능이 있다.
- Loaders 를 사용해 파일을 잔처리할 수 있기 때문에 앱 실행 시간이 빨라진다.
개발자 생산성
- 개발자가 단시간에 앱을 만들 수 있도록 지원하는 내부 캐싱 시스템이 있다.

ℹ️ 단점

학습하기 어렵다
버기와 슬로우
- 간단한 기능을 수행하기 위해 플러그인에 과도하게 의존하게 되면 느려질 수 있다.

ℹ️ Webpack 더 자세히 알아보기

Vite

요즘 핫한 번들러
JS 번들러인 Rollup을 사용하여 코드를 번들한다.

ℹ️ 장점

가볍고 빠르다.
- Native ES6 모듈 시스템을 활용함으로써 브라우저 요청 수가 줄여지고 애플리케이션 코드를 코다 빠르게 처리 가능하다.
- HMR 기능이 있다.
멀티프레임워크 지원
- 프레임워크에 구애받지 않는다.
- esbuild 및 rollup 플러그인 에코시스템과 같은 다른 번들러를 활용하여 개발자에게 넓은 옵션을 제공한다.

ℹ️ 단점