Bundler 개념

Bundler 개념

• 번들러가 어떻게 만들어졌나
• 번들러의 역할
• 번들러의 장점

번들러(Bundler)의 탄생 배경

웹 초기, 웹을 구성하는 HTML이나 JavaScript 파일의 크기가 지금에 비해서 작았다.

하지만 점점 기술이 발전하면서 파일 하나 당 코드의 양과 웹을 구성하는 파일의 수가 커지게 되었다.

하나의 웹 서비스에서 많게는 수 천개의 파일을 다루게 되면서 아래와 같은 문제들이 발생했다.

1. 중복된 이름으로 인한 충돌, 위험

   대규모 웹페이지의 경우, 엄청난 개수의 JavaScript 파일로 구성

   여러 사람이 웹 서비스 개발에 참여하므로 서로 만든 함수명과 변수명이 중복

   함수명과 변수명이 같은 경우 언제 어디서 충돌이 일어날 지 모르는 위험이 존재

2. 파일 전송 속도 문제

   사용자가 브라우저에서 URI를 입력하면 서버는 그에 해당하는 파일을 사용자에게 제공

   웹 애플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간 지연

   파일 하나에 모든 스크립트를 작성하기엔 추후 유지보수 측면에서 손해

번들러의 역할

기본적으로 위의 문제들을 해결하기 위해, 여러 개의 파일을 하나로 번들링해주는 “번들러” 가 등장 대표적으로 webpack, parcel, rollup이 있고, webpack이 주로 사용

• Webpack

  현대 자바스크립트 어플리케이션의 Static Module Bundler

  Webpack은 Dependencies Graph를 통해 필요한 형태의 하나 또는 여러 개의 Bundle을 생성

  Webpack은 로더(babel-loader)를 통해 ES6 이상의 자바스크립트 문법을 ES5 버전의 자바스크립트 문법으로 변환

  (ES5만 지원하는 오래된 브라우저에서도 ES6 이상의 문법으로 이루어진 JS 파일을 실행 가능)

• 번들(Bundle)이란?

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

번들러의 장점

이전에는 각 파일들마다 서버에 요청하여 자원을 얻어와야 했던 반면,

• 같은 타입(ex. html, css, js)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 비용 감소
• 사용하지 않은 파일은 포함하지 않기 때문에, 번들의 크기 감소
• 모듈 단위 코딩으로 ‘변수명 중복’으로 인한 예상치 못한 충돌 방지
• 코드의 가독성과 유지보수의 편리함을 향상