번들러(Bundler)의 탄생 배경

원시시대의 웹사이트

웹의 초창기 때는 웹사이트의 규모가 지금과 같이 어마어마하지 않았다. 따라서 웹을 구성하는 HTML이나 JS 파일의 크기가 지금에 비해서 훨씬 작았고 서비스의 유지보수도 그렇게 어렵지 않았다.

하지만 점점 기술이 발전하면서 파일 하나 당 코드의 양과 웹을 구성하는 파일의 수 또한 커지게 되었으며, 하나의 웹 서비스에서 많게는 수 천개의 JS 파일을 다루게 되면서 힘들어짐...

대표적인 문제점들은 아래와 같다.

1. 중복된 이름으로 인한 충돌, 위험
   • 대규모 웹페이지의 경우, 엄청난 개수의 JS 파일로 구성되며, 한 사람도 아니고 여러 사람이 웹 서비스 개발에 참여하므로 서로 만든 함수명과 변수명이 겹치는 일이 일어나기 마련이다. 이렇게 함수명과 변수명이 같은 경우 언제 어디서 충돌이 일어날 지 모르는 위험이 존재한다.
2. 파일 전송 속도 문제
   • 사용자가 브라우저에서 URI를 입력하면 서버는 그에 해당하는 파일을 사용자에게 제공해준다. 웹 애플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간이 오래 걸리게 된다.
   • 게다가, 파일 하나 당 크기로 크다면 사용자는 요청한 웹 서비스를 받기까지 상당히 오랜 시간 기다려야 할 것입니다. 그렇다고 파일 하나에 모든 스크립트를 작성하기엔 추후 유지보수 측면에서 최악의 방법이 된다.

번들러가 뭘 해주는데?

기본적으로 위 문제들을 해결하기 위해, 간단히 말해서 여러 개의 파일을 하나로 묶어주는 "번들러" 가 등장했다.
대표적으로 webpack, parcel, rollup 이 존재한다. 이 중에서는 webpack 이 주로 사용되고 있다.

![[스크린샷 2023-10-30 오후 5.35.20.png]]

Webpack이란?

• 현대 자바스크립트 어플리케이션의 Static Module Bundler이다.
• Webpack은 Dependencies [[Graph]]를 통해 필요한 형태의 하나 또는 여러 개의 Bundle을 생성한다.

번들(Bundle)이란?

• 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package이다.
• 각각의 모듈들에 대해 의존성(연관) 관계를 파악하여 하나 또는 여러개의 그룹(=번들)으로 볼 수 있다.

이렇게 번들링을 해주는 것이 바로 번들러이다.

---

번들링을 했을 때의 장점?

1. 모듈 코드 하나 혹은 여러개의 파일로 묶어주는 도구

1. 이전에는 각 파일들마다 서버에 요청하여 자원을 얻어와야 했던 반면, 같은 타입(ex. html, css, js)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크적으로 비용이 줄어든다.
2. 여러 개의 파일을 묶어 하나의 번들로 만들 때 파일끼리의 연관관계(종속성, 의존성)을 알아서 확인하여 사용하지 않은 파일은 포함하지 않기 때문에, 번들의 크기를 줄여 페이지 로딩을 더욱 빠르게 한다.
3. 번들러를 사용하면 모듈 단위 코딩이 가능해진다. 모듈 단위 코딩을 하면 각 모듈이 독립적인 공간이므로 앞에서 문제가 되었던 '변수명 중복'으로 인한 예상치 못한 에러의 발생을 막을 수 있습니다. 또한 모듈 단위 코딩으로 코드의 가독성과 유지보수의 편리함을 향상시킬 수 있다.
4. Webpack 은 로더(babel-loader) 를 통해 ES6 이상의 자바스크립트 문법을 ES5 버전의 자바스크립트 문법으로 변환시켜줄 수 있다. 이를 통해서 ES5만 지원하는 오래된 브라우저에서도 ES6 이상의 문법으로 이루어진 JS 파일을 실행할 수 있게 한다.

2. 최적화

번들러는 성능 향상을 위해 추가 기능을 제공한다.

• Tree Shaking
  필요 없는 코드를 제거하고 번들 파일의 크기, 번들링 시간을 줄여준다.
• HMR (Hot Module Replacement)
  코드가 변경되면 감지하고 브라우저에 최신 코드를 반영하여 자동으로 모듈을 교체한다. 개발자는 새로고침을 하지 않아도 반영된 것을 빠르게 확인할 수 있으며 변경 사항만 업데이트 하기 때문에 개발 속도가 빨라진다.
• Code Splitting
  JS를 청크로 분할하고, 청크가 필요한 경로에만 제공하여 성능을 향상시킨다.
  모듈 번들러가 의존성 있는 모듈끼리 번들링해서 클라이언트에게 보내 HTTP request 통신 횟수를 최소화하여 유저의 로딩 시간을 줄였다. 그런데 이렇게 되면 하나의 번들 파일의 크기가 너무 커지지 않을까??? 큰 번들을 브라우저에서 파싱하고 컴파일 해야하니 로딩 시간이 더 길어지지 않을까???
  이러한 문제를 인지하여 코드 스플리팅이라는 개념이 생겼다. 하나의 큰 번들을 여러 개의 번들로 쪼개고 필요한 경로에만 제공하여 최적화를 시킨다.
• Transformations
  트랜스파일러를 사용하여 ES6 버전 이상의 스크립트를 사용 가능하게 해준다.