번들러 분석기: Webpack, vite, esbuild, rollup

1. 번들러

(1) 등장 배경

여러 모듈을 각각 호출하면 여러 개의 모듈을 호출하게 된다. 하지만 서비스의 규모가 커짐에 따라 분리된 호출이 서버에 부하를 가져오게 되었고, 여러 모듈을 하나의 모듈로 묶는 번들링 기술이 등장하게 되었다. 서버에 한 번의 호출을 하게 되는 혁신이 일어난 것이다.

 

(2) 종류 및 기능

• 종류

Webpack

rollup

esbuild

Vite

• 기능
  • Tree-shaking: 사용되는 모듈만 AST 트리에 포함시켜 불필요한 코드를 제거해, 가벼운 번들을 생성
  • 동적 서버: 번들링 결과를 메모리에 실시간으로 제공하는 서버이며, development 환경에만 존재

 

2. 모듈

(1) 정의

기술이 발전함에 따라 웹 페이지의 크기가 날이 갈수록 커지고 있다. 하나의 자바스크립트에서 작업을 하여 결과물을 제시한다는 것은 불가능에 가깝기에, 개발자들은 재사용 및 유지보수를 위해 파일을 여러 개로 분리하게 되었다.  

SPA의 경우, 하나의 html 내부에 여러 스크립트를 호출하게 되는데 전역 스코프를 공유하는 문제가 발생해, 독립적 스코프를 가진 여러 파일의 형태가 탄생하게 되었다. 이때, 분리한 파일을 모듈이라고 한다.

<script type="module"/>

 

(2) 종류

• CommonJS

node.js 환경을 위해 도입하게 된 모듈 시스템이다. 주로 node.js 환경에서 사용되며, 브라우저에서 사용할 땐 필요한 모듈을 모두 내려받을 때까지 아무것도 할 수 없다는 단점이 존재한다.

 

사용법은 다음과 같다.

const sum=100;
module.exports=sum;

const {sum}=require('./math.js');

 

 

• ES Module

ES6 환경을 위해 도입된 모듈 시스템이다. import, export를 통해 사용할 수 있다.

node.js 환경에서 ES Module을 사용하려면 Babel(구형 브라우저에서 최신 문법 적용하는 빌드 도구)가 필요했으나, node.js 13.2부터 기능을 지원하며 쉽게 사용할 수 있게 되었다.

최근의 트렌드는 CommonJS보다 ES Module이다.

 

 

3. Webpack

의존성 그래프를 생성해, 이를 기반으로 여러 개 파일을 하나로 묶어주는 모듈 번들러이다. 다양한 loader로 파일을 변환/번들링/빌드하고, plugin으로 output을 튜닝할 수 있다.

 

(1) 속성

• 내부 언어: CommonJS로 구성되어 있으며, Webpack v5부터 ES6으로 번들링이 가능
• Tree-shaking
  • development 환경: 모드에 따라 다름
  • production 환경: 기능 존재하지만, 설정 필요
• 동적 서버: webpack-dev-server 제공

 

(2) 사용법

• 설치 방법: development 환경에서만 사용

npm install --save-dev webpack webpack-cli

• 실행 방법: cli

npx webpack --entry ./src/index.js --output-path ./dist/

• 실행 방법: 파일 실행

const path = require('path');

module.exports = {
	mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

npx webpack

 

4. rollup

확장성에 초점을 두었기에 순수 JS만을 번들링 할 수 있어, 라이브러리 번들링에 적합한 번들러이다. 모듈을 호이스팅해 한 번에 평가하기에 빠르다. 

• 내부 언어: TypeScript(ES6)으로 구성되어 있으며, ES6으로 번들링이 가능하고 CommonJS 코드를 ES6에서 사용가능
•  Tree-shaking
  • development 환경: 기능 존재
  • production 환경: 기능 존재
• 동적 서버: 기능 존재하지 않으며, plugin 필요

 

5. esbuild

• 내부 언어: Go로 구성되어 있어, 다른 번들러에 비해 빠른 성능을 제공
•  Tree-shaking
  • development 환경: 기능 존재
  • production 환경: 기능 존재
• 동적 서버: 기능 존재하지 않으며, 서버 따로 구성 필요

단, 설정이 유연하지 못하고 안전성 문제가 존재한다. 현재(25/04/13)도 0.25.2 버전으로 정식 버전이 배포되지 못했다.

 

6. Vite

esbuild의 단점을 보안한 차세대 번들러이며, 개발 서버 구동에 필요한 시간이 0에 수렴할 정도로 엄청난 속도를 자랑한다.

development 환경과 production 환경에서 분리된 도구를 사용한다.

• development 환경: esbuild를 통해 번들링
• production 환경: rollup을 통해 번들링

 

• 내부 언어: ES Module으로 구성되어 있으며, ES6으로 번들링을 하고 CommonJs와 UMD 등을 ESM으로 불러올 수 있도록 변환을 지원
• Tree-shaking
  • development 환경: 기능 존재
  • production 환경: Rollup기반 기능 존재
• 동적 서버: 내장 서버 존재하며, 코드 바꾸면 자동 반영되는 HMR(Hot Module Replacement) 기능 제공

 

단, development 환경과 production 환경에서 설정이 달라, production 환경에서 CommonJs, Polyfill 처리가 추가로 필요하다. 빌드 안정성이 낮아지며 환경 설정에 요구되는 시간이 존재해 development에서만 활용되는 경우가 있다.

기본적으로 root(최상단)/index.html이 진입점이기에, 순수 JS만을 번들링 하기 위해선 라이브러리 모드 설정이 필요하다.

 

7. 분석

• 서비스 규모가 큰 경우: Webpack(커스터마이징 중요) > Vite(속도 및 개발자 경험이 중요)
• 서비스 규모가 작은 경우: Vite(속도 및 개발자 경험이 중요) > esbuild(빌드만 필요)
• 라이브러리 개발: rollup(다양한 포맷이 필요) > Vite(다양한 포맷 및 개발자 경험이 중요)> esbuild(간단한 번들링만 필요)

	서비스 규모가 큰 경우	서비스 규모가 작은 경우	라이브러리 개발하는 경우
Webpack	✅	❌	❌
rollup	❌	❌	✅
esbuild	❌	✅	✅
Vite	✅	✅	✅

 

 

(1) 서비스 규모가 큰 경우

• Webpack: 대규모 서비스에서 커스터마이징이 중요할 때, plugin/loader 등 다양한 설정을 최적화되게 할 수 있음
• Vite: HMR이 빠르고 설정이 간편해 개발자 경험이 좋으나, Webpack에 비해 세밀한 제어에 한계가 존재함
•  rollup, esbuild: 라이브러리/경량 번들링에 적합

 

(2) 서비스 규모가 작은 경우

• Vite: HMR이 빠르고 설정이 간편해 개발자 경험이 좋음
• esbuild: Vite보다 빠르며 빌드만 필요할 때 적합(SSR 없이 번들링만 진행하는 경우)
• Webpack, rollup : 설정이 복잡하며, Vite가 내부적으로 rollup을 사용해 대체 가능

 

(3) 라이브러리 개발

• rollup: Tree-shaking, ESM/CJS 동시 출력이 가능함
• esbuild: 빠르게 개발하고 번들링하기에 적합하나, Tree-shaking/포맷 다양성은 Rollup보다 부족함
• Vite: 내부적으로 rollup을 사용하나, 라이브러리 모드 설정 필요함
• Webpack: 라이브러리 번들링에 과하며, output 최적화가 덜 깔끔함