프론트엔드
에 관련된 글들을 읽다보면 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가지에 대해서 간단히 알아보고 지나가보도록하겠습니다.
ℹ️ 장점
ℹ️ 단점
static module bundler
로서 고도의 커스터마이즈 기능을 갖추고 있다ℹ️ 장점
ℹ️ 단점
ℹ️ Webpack 더 자세히 알아보기
ℹ️ 장점
ℹ️ 단점
ℹ️ Vite 더 자세히 알아보기
각각 장단점이 있으니 아래의 비교 사진을 확인해보시고 사용해보시면 좋을 것 같습니다. 번들러 비교 사이트