연재

모듈은 어떻게 번들이 되나

브라우저는 원래 import를 몰랐다 — 모듈 시스템(격리·정적)부터 ESM 3단계 로딩, 번들러 런타임까지, 수백 개 파일이 하나로 합쳐져 브라우저에 도착하는 과정을 밑바닥부터 따라간 기록.

3편

  1. #1

    모듈은 어떻게 번들이 되나 #1 — 브라우저는 원래 import를 몰랐다

    브라우저는 원래 import를 몰랐다. 수백 개 파일에 쓰는 import가 하나로 합쳐져 브라우저에서 돌기까지 무슨 일이 일어나는지 — 모듈 시스템(격리·정적)부터 ESM 3단계 로딩, 그리고 번들러 런타임까지 밑바닥부터 따라갔다.
  2. #2

    모듈은 어떻게 번들이 되나 #2 — 안 쓰는 코드는 어떻게 사라지나

    import한 함수만 번들에 남고 나머지는 사라진다. 누가 지웠나(tree-shaking), 왜 CommonJS에선 안 되나, 왜 개발 서버에선 안 지워지나(dev≠prod), 그리고 import type은 왜 필수인가 — 1편의 정적 그래프 위에서 번들러가 실제로 부리는 것들을 따라갔다.
  3. #3

    모듈은 어떻게 번들이 되나 #3 — 왜 번들러가 이렇게 많은가

    webpack·Rollup·esbuild·Vite·Rspack·Turbopack·Rolldown — 왜 이렇게 많을까. 이름을 외우는 대신 각 도구가 어떤 문제를 풀려고 태어났는지 계보를 따라가면 지형도가 저절로 그려진다. Browserify부터 Rust 세대까지, 그리고 2026년의 수렴 지점.