시스매

번들러

7 min read

2025-09-25 23:28

Tags: 리액트 넥스트

번들러

번들러의 주요 기능

  1. 의존성 그래프 구축:
    1. 번들러는 진입점(Entry Point) 파일부터 시작해 import나 require 문을 따라가며 모든 모듈의 의존 관계를 파악한다.
    2. 이 과정에서 어떤 모듈이 어떤 모듈을 필요로 하는지 트리 구조의 **의존성 그래프(Dependency Graph)**를 만든다.
  2. 번들링(Bundling):
    1. 의존성 그래프를 바탕으로, 번들러는 모든 모듈의 코드를 하나의 파일로 합친다.
    2. 이 과정에서 각 모듈의 스코프를 격리하여 전역 스코프 오염을 방지한다.
  3. 트랜스파일링(Transpiling):
    1. 최신 자바스크립트(ES6+) 문법이나 타입스크립트, JSX(React) 코드를 구형 브라우저에서도 이해할 수 있는 ES5 문법으로 변환한다.
    2. Babel 같은 트랜스파일러를 번들러에 통합하여 이 작업을 수행한다.
  4. 로더(Loader) 또는 플러그인(Plugin):
    1. 자바스크립트뿐만 아니라 CSS, 이미지, 폰트 파일 등 다양한 리소스를 번들러가 처리할 수 있도록 확장해주는 도구다.
    2. 예를 들어, CSS 로더는 CSS 파일을 자바스크립트 모듈로 변환하고, 이미지 로더는 이미지를 데이터 URL로 변환하거나 최적화된 파일로 생성
  5. 코드 스플리팅(Code Splitting):
    1. 모든 코드를 하나의 거대한 번들로 합치면 초기 로딩 시간이 길어질 수 있다.
    2. 코드 스플리팅은 번들 파일을 여러 개의 작은 덩어리로 나누어, 필요한 시점에만 해당 덩어리를 로드하게 한다.
    3. 이는 특히 SPA(Single Page Application)에서 초기 로딩 성능을 크게 향상시킨다.
  6. 성능 최적화:
    • 난독화]:
      • 변수명, 함수명을 짧게 바꾸고 공백을 제거하여 코드의 크기를 줄인다. UglifyJS나 Terser 같은 도구를 사용
    • 데드 코드 제거(Tree Shaking):
      • import 구문은 있지만 실제로는 사용되지 않는 코드를 최종 번들에서 제거한다. 이를 통해 번들 크기를 더욱 줄일 수 있다.
    • 캐싱]:
      • 파일 내용이 변경되지 않았을 때는 브라우저 캐시를 효율적으로 활용하여 재로딩을 방지한다.
      • 번들 파일명에 해시(Hash) 값을 포함시키는 방식으로 구현한다.

번들러 작동 원리, 단계별 해부

  1. 진입점 설정:
    • 번들러는 webpack.config.js와 같은 설정 파일에서 **진입점(Entry)**을 찾는다. 이 파일부터 번들링 과정이 시작된다.
  2. 모듈 파싱:
    • 진입점 파일의 코드를 읽고 분석한다. import나 require와 같은 모듈 구문을 찾아낸다.
  3. 의존성 탐색:
    • 찾아낸 모듈 구문을 따라가며 다음 모듈로 이동한다.
    • 이 과정을 재귀적으로 반복하며 모든 모듈의 의존 관계를 파악하고, 이를 시각화하면 거대한 의존성 그래프가 완성된다.
  4. 변환 및 로딩: 각 모듈 파일을 처리할 때, 파일 확장자에 따라 적절한 로더를 적용한다.
    • .js 파일: 바벨 로더를 통해 트랜스파일링.
    • .scss 파일: Sass 로더와 CSS 로더를 통해 일반 CSS로 변환 후 번들에 포함.
    • .png 파일: 파일 로더를 통해 번들링 시점에 새로운 파일로 생성하고, 생성된 파일의 경로를 반환.
  5. 번들 파일 생성:
    • 모든 모듈의 코드를 하나의 자바스크립트 파일로 합친다.
    • 이 과정에서 각 모듈은 고유한 ID(숫자 또는 해시)를 부여받고, 모듈 로더 함수로 감싸져 서로의 스코프에 영향을 주지 않게 된다.
  6. 최적화:
    • 완성된 번들 파일에 대해 난독화, 데드 코드 제거, 캐싱 처리를 위한 해시 값 추가 등의 최적화 작업을 수행한다.
  7. 결과물 출력:
    • 최종적으로 생성된 번들 파일(번들러의 Output)을 지정된 경로에 저장한다.
특징웹팩(Webpack)롤업(Rollup)파셀(Parcel)비트(Vite)
설정복잡함비교적 간단함거의 없음간단함
속도느림보통빠름매우 빠름
용도복잡한 웹 애플리케이션라이브러리간단한 프로젝트모든 프로젝트
확장성매우 뛰어남보통보통보통
특징풍부한 플러그인 생태계효율적인 트리 쉐이킹제로 설정ES 모듈 기반 개발 서버

그래프 뷰

백링크