JavaScript 모듈로 이야기하는 번들러와 웹팩, 롤업, 비트에 대한 요약 정리

초창기 웹에서 JavaScript의 역할은 크지 않았기에 하나의 파일에 모든 기능을 개발해도 크게 문제가 되지 않았다. 하지만 JavaScript로 개발된 프로젝트의 규모는 갈수록 커지고 복잡해졌다. 모듈화되지 않은 거대한 코드는 복잡도 증가를 야기해 잠재적 위험을 높이고 유지보수를 어렵게 했다. 이를 해결하기 위해 물리적으로 JavaScript 파일을 분리해서 개발하기 위한 방법, 즉 JavaScript 모듈의 표준화가 필요해지게 되었고 이에 2009년 CommonJS와 AMD가 등장하게 되었다.

Node.js 진영에서는

와

를 사용하는 CommonJS의 명세를 채택했고, 이 모듈화된 코드를 번들링하기 위해 최초의 번들러,

가 등장했다.

CommonJS와 AMD의 호환을 위해 UMD 패턴이 등장했고, 현재 웹팩이나 롤업에서도 ES6 모듈 로드의 fallback으로 UMD 패턴을 사용하고 있다.

이후 JavaScript 진영은 2015년 ES6 사양에서

와

를 사용하는 ES6 Module(ESM)을 공개했다. 이를 통해 간단한 문법으로 동기 및 비동기 로드를 비롯한 순환 참조 관리와 정적 분석, 트리 쉐이킹(Tree Shaking)을 쉽게 지원할 수 있게 되었다.

ES6 문법을 지원하지 못하는 구형 브라우저에 대응하기 위해 트랜스파일러의 필요성이 대두되어 ‘바벨(Babel)’이 등장하게 되었다.

프로젝트의 소스 코드들을 압축하는 작업을 수행하는 프로그램을 말한다.

웹 사이트의 규모가 커져가면서 프로젝트에 사용되는 JavaScript 모듈의 개수는 급속히 늘어났는데, 웹 브라우저에서 1개의 파일을 다운로드 받는 것이 여러 파일을 다운로드 받는 것보다 훨씬 빠르기 때문에 여러 파일을 압축하여 최소한의 압축 파일 묶음인

을 생성하기 위해 사용한다.

트랜스파일링, 코드 스플리팅(Code Splitting), CSS 미니파이(CSS Minification), 이미지 파일 최적화 등 생산성과 성능을 위한 여러 추가 기능까지 함께 수행할 수 있어 대부분의 프로젝트에서 사용하고 있다.

대표적인 번들러로 ‘웹팩(Webpack)’, ‘롤업(Rollup)’, ‘비트(Vite)’ 등이 있다.

2012년 v1이 공개되고 2020년 v5가 공개 되었다.

HMR(Hot Module Replacement)을 처음으로 제안하고, 코드 스플리팅과 레이지 로딩(Lazy Loading)을 지원하는 등 빠르고 편리한 기능들을 바탕으로 사람들의 관심과 적극적인 참여를 이끌어냈다.

웹팩 생태계는 폭발적으로 성장하여 이제는 굉장히 많은 플러그인과 레퍼런스를 보유하고 있는 명실상부 가장 많이 쓰이는 번들러가 되었다.

내부적으로 CommonJS를 사용하고 있어 CommonJS 형태로만 번들링이 가능했으나, V5 부터는 ES6로도 번들링이 가능해졌다.

대규모 어플리케이션이나 SPA 프로젝트에 많이 사용된다.

👉 공식 홈페이지 :

2018년 v1이 공개되고 2022년 v3가 공개 되었다.

트리 쉐이킹을 지원하고, 여러 모듈을 하나의 스코프로 결합하는 모듈 호이스팅을 통해 웹팩보다 번들 크기를 줄이고 더 좋은 성능을 제공할 수 있다.

ES6 모듈 형태로 번들링이 가능하고 플러그인을 통해 CommonJS를 ES6 코드로 변환할 수도 있다. 내부적으로 TypeScript를 사용하고 있다.

라이브러리 개발 또는 모듈화된 코드 번들링에 많이 사용된다.

👉 공식 홈페이지 :

2021년에 v1이 공개되고 2022년 v4가 공개 될 정도로 빠르게 업그레이드 되고 있다. esbuild로 파일들을 통합한 후 롤업을 통해 번들링 되는데, 롤업 생태계와의 호환을 통해 비트 생태계를 더 빨리 확장시킬 수 있었다.

웹팩이나 롤업과는 달리 브라우저에서 지원하는 ESM(ES Modules) 및 네이티브 언어로 작성되어 매우 빠른 서버 구동과 HMR을 구현했다.

ES6를 타겟으로 번들을 생성하며, 그 아래를 대응하기 위해서는 별도의 폴리필을 사용해야 한다. 공식적으로는

플러그인을 통해 해당 폴리필을 제공하고 있다.

이미 플러그인 이름이 legacy다.

컴포넌트를 관리하고 공유하는데 특화되어 있고 모노레포 구성을 지원하고 있기 때문에 대규모 어플리케이션이나 모노레포 환경에서 많이 사용된다.

기본적으로

파일을 통해 빌드를 진입하는데, 순수 JavaScript 번들을 위해서는 별도로

를 설정해주어야 한다.

👉 공식 홈페이지 :