번들러는 다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할이다. 번들러가 필요한 주요 이유는 다음과 같다.
첫째, 네트워크 요청 성능을 개선하기 위한 것이다. 다수의 개별 파일에 대해 모두 네트워크 요청을 수행할 경우, 성능에 부정적인 영향이 있을 수 있는 것이다. 번들러는 다수의 파일을 하나 또는 소수의 파일로 묶어 네트워크 요청을 최적화하는 것이다. 예를 들어, 애플리케이션이 수백 개의 JavaScript, CSS, 이미지 파일을 사용한다면, HTTP 요청 수가 증가해 로딩 속도가 느려질 수 있는 것이다. 이때 번들러는 이들을 효율적으로 묶어 소수의 파일로 만듦으로써 네트워크 요청 수를 줄여주는 것이다.
둘째, 번들러는 트랜스파일링을 통해 더 효율적이고 호환성 있는 애플리케이션을 만드는 데 기여하는 것이다. 먼저, 트랜스파일링을 통해 코드를 최적화하는 것이다. 예를 들어, Dead Code Elimination과 Tree Shaking과 같은 방법을 통해 사용되지 않는 코드와 불필요한 모듈을 제거해 번들 크기를 줄이고 로딩 성능을 개선하는 것이다. 또한, 번들러는 호환성을 높이기 위해 최신 JavaScript 문법과 기능을 구형 브라우저에서도 실행 가능하도록 변환하는 것이다. 예를 들어, ES6 이상의 모듈, 비동기 함수, 옵셔널 체이닝 같은 최신 기능은 지원하지 않는 브라우저에서 문제가 될 수 있는데, 번들러는 이를 ES5로 변환하여 호환성을 보장하는 것이다. 이때 Babel 같은 트랜스파일러와 연계하여 처리하는 것이다.
