노트

번들러

Module Bundler

프런트엔드#tooling · 연결된 개념 11개

쉽게 말하면

번들러는 낱장으로 흩어진 원고를 이어진 순서대로 엮어 책 몇 권으로 제본하는 도구예요. 브라우저는 파일 수백 개를 따로 요청하지 않고 책 몇 권만 받으면 되죠.

비유가 깨지는 곳 제본만 하는 건 아니에요. 묶으면서 압축하고, 안 쓰는 코드를 빼고, 나중에 필요한 부분은 따로 떼기도 해요. 다만 번들러는 대부분 TS 타입을 지우기만 하고 검사하진 않아서 tsc --noEmit을 따로 돌려요.

번들러(Bundler)는 모듈로 나뉜 소스 코드를 의존 관계(Dependency Graph)를 따라 묶고 변환해, 브라우저가 적은 요청으로 받을 수 있는 결과물로 만드는 빌드 도구다.

  • 왜 필요한가: ESM을 그대로 쓰면 파일마다 요청이 생긴다. 번들러는 이를 몇 개 파일로 묶고, 압축(minify)하고, 트리 셰이킹·코드 스플리팅과 동적 임포트을 적용한다
  • Webpack의 기본 개념
    • entry: 의존 그래프를 그리기 시작할 파일
    • output: 결과물 위치와 이름
    • loader: JS(JavaScript)가 아닌 파일(TS, CSS(Cascading Style Sheets) 등)을 변환하는 규칙. 예: ts-loader
    • plugin: 빌드 전체에 끼어드는 확장. 예: 결과 폴더 비우기
    • mode: development·production에 따라 최적화 수준이 달라진다
  • 도구들의 위치(2026 기준)
    • Webpack: 설정이 유연하고 생태계가 가장 크다
    • Rollup: ESM(ECMAScript Modules) 중심으로 설계돼 트리 셰이킹이 정확하다. 라이브러리 빌드에 많이 쓴다
    • Vite: 개발 서버는 브라우저의 네이티브 ESM으로 빠르게 띄우고, 빌드는 Rollup 계열로 한다. 환경별 설정은 Vite mode와 env 파일
    • Turbopack: Next.js 16부터 dev와 build의 기본 번들러다(Next.js 16 변경점)
  • 번들러 대부분은 TS 타입을 지우기만 하고 검사하지는 않는다. 그래서 타입 검사는 tsc --noEmit으로 따로 돌린다

여러 패키지를 한 저장소에서 빌드하는 구성은 모노레포·Turborepo 참고.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 번들 크기 줄이기

    번들 다이어트는 사용자가 내려받는 JavaScript 양을 측정하고 줄이는 작업이다. 같은 용량이라도 JS는 이미지보다 비싸다. 이미지는 다운로드와 디코딩만 하면 되지만, JS는 다운로드·파싱·컴파일·실행을 모두 거친다.

  • 배럴 파일과 re-export

    배럴 파일(Barrel File)은 여러 모듈의 export를 index.ts 하나에 모아 다시 내보내(re-export) 진입점을 하나로 만드는 파일이다. 쓰는 쪽은 import { Button, Input } from './components'처럼 한 경로에서 가져온다.

  • NestJS

    NestJS는 TypeScript를 전제로 모듈·의존성 주입(Dependency Injection, DI)·데코레이터(decorator) 구조를 제공하는 Node.js 서버 프레임워크다. 2017년 Kamil Myśliwiec가 만들었고, 구조를 강제하는 방식 때문에 흔히 "Node.js의 Spring"이라 불린다.

  • 크롬 개발자 도구 팁

    크롬 DevTools에서 알아 두면 디버깅 시간이 줄어드는 기능 모음. 대부분 다른 크로미움(Chromium) 브라우저에서도 같다.

  • 브라우저 렌더링 파이프라인

    브라우저가 받은 HTML·CSS·JS를 화면의 픽셀로 바꾸는 순서. 처음 로드할 때도, 이후 무언가 바뀔 때도 같은 단계를 거친다. 바뀐 내용에 따라 어느 단계부터 다시 시작하는지만 다르다.

보기 옵션