[Web] 모듈 번들러, 한 페이지로 끝내기

모듈 번들러(Module Bundler)란?

여러 개의 파일(모듈)을 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구이다.

이를 통해 웹 애플리케이션을 실행하기 위해 필요한 모든 파일을 효율적으로 관리하고 브라우저에서 실행 가능한 형태로 제공할 수 있으며 개발자는 복잡한 코드를 관리하고 성능 최적화된 웹 애플리케이션을 쉽게 배포할 수 있다.

대표적인 모듈 번들러로는 Webpack, Parcel, Vite, Rollup 등이 있다.

 

비유를 하자면 웹 애플리케이션은 복잡한 재료(코드, 이미지, CSS)를 가진 요리와 같고 모듈 번들러는 요리를 만들기 위해 재료를 준비하고 최적화된 형태로 포장하는 주방 관리자로 비유할 수 있다.

 

모듈 번들러

 

1. 필요한 이유

현대의 웹 애플리케이션은 규모가 커지고 복잡해지면서 여러 개의 자바스크립트 파일, CSS, 이미지, 폰트 등의 다양한 자산을 포함하게 되었다.

이러한 다양한 파일들을 효율적으로 관리하기 위해 모듈화(Modularization)라는 개념이 등장했는데 모듈화란 애플리케이션을 작은 단위(모듈)로 나눠서 개발하는 방식을 말한다.

하지만 브라우저는 기본적으로 모듈 시스템(CommonJS, ES Modules 등)을 이해하지 못하고 또한 많은 개별 파일 요청을 처리하는 데 비효율적이라는 문제를 해결하기 위해 모듈 번들러가 만들어졌다.

모듈 번들러는 모듈 의존성 분석해 파일 간의 의존 관계를 파악하고 번들링해 여러 파일을 하나의 파일로 묶어서 브라우저가 효율적으로 읽을 수 있도록 제공하여 문제를 해결한다.

 

2. 모듈 번들러가 해결하는 문제

• 파일 간 의존성 관리
  • 수백, 수천 개의 파일을 효율적으로 관리
  • 파일 이름 충돌 방지
• 브라우저 호환성
  • 브라우저가 지원하지 않는 최신 문법(ES6+, TypeScript)을 트랜스파일(transpile)하여 지원 가능하게 변환
• HTTP 요청 감소
  • 번들링을 통해 파일 요청 수를 줄여 성능 최적화
• 개발 환경 지원
  • 라이브 리로드(Hot Module Replacement), 디버깅 툴 등 개발 편의 기능 제공

 

3. 주요 역할

• 의존성 그래프 생성
  • 코드를 분석하여 파일 간의 의존성을 파악한다.
  • 어떤 파일이 다른 파일을 필요로 하는지(Import/Require) 분석한다.
  • 의존성 그래프는 요리사가 어떤 재료가 필요한지 파악하는 걸로 비유할 수 있다.
• 번들링
  • 의존성 그래프를 기반으로 모든 파일을 묶어서 하나 또는 여러 개의 번들 파일로 출력한다.
  • 요리사가 재료를 한 곳에 모아 요리(번들 파일)로 만드는 걸로 비유할 수 있다.
• 최적화
  • 코드 압축(Minification): 불필요한 공백, 주석 제거한다.
  • 트리 쉐이킹(Tree Shaking): 사용되지 않는 코드 제거한다.
  • 코드 스플리팅(Code Splitting): 필요한 파일만 동적으로 로드하도록 분리한다.
  • 요리사가 재료를 낭비하지 않고 꼭 필요한 만큼만 사용하는 걸로 비유할 수 있다.

 

4. 사용 예시

• 기본 자바스크립트 코드

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // 5

위와 같은 코드가 있다면, 브라우저는 모듈을 직접 처리하지 못하므로 모듈 번들러를 사용해 번들 파일을 생성한다.

 

• 번들링된 결과 (simplified)

(function () {
  function add(a, b) {
    return a + b;
  }

  console.log(add(2, 3)); // 5
})();

 

 

정리하자면 모듈 번들러는 모듈화된 코드를 브라우저에서 실행 가능한 파일로 묶어주는 도구이며 의존성을 분석하고 최적화된 번들 파일을 생성하고 개발, 빌드, 배포 프로세스를 간소화해준다.