Bundler

학습 키워드

• Bundler

• Bundler Tools

  • Parcel

  • webpack

  • rollup

Bundler

📖 Bundler 무엇인가?

• 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package이다.

• 각각의 모듈들에 대해 의존성(연관) 관계를 파악하여 하나 또는 여러개의 그룹(=번들)으로 볼 수 있다.

🌎 Bundler의 탄생 배경

웹의 초장기 때는 웹사이트의 규모가 지금과 같이 어마어마하지 않았다. 웹을 구성하는 HTML이나 JavaScript 파일의 크기가 지금에 비해서 훨씬 작았고, 서비스의 유지보수도 그렇게 어렵지 않았다. 그러나.. 점점 기술이 발달하면서 파일 하나 당 코드의 양과 웹을 구성하는 파일의수 또한 커지게 된다. 하나의 웹서비스에 많게는 수천개의 JavaScript 파일을 다루게 되면서 삐걱거리는 소리가 들려오기 시작했다.

• 파일간의 중복된 이름 사용으로 인한 충돌

  • 대규모 웹페이지의 경우, 한사람이 아닌 여러사림이 웹 서비스 개발에 참여하므로 서로 만든 함수명과 변수명이 겹치는 일이 일어나기 마련이다. 이렇게 함수명과 변수명이 같은 경우 언제 어디서 충돌이 일어날지 모르는 위험이 존재한다.

• 파일 전송 속도 문제

  • 사용자가 브라우저에서 URI를 입력하면 서버는 그에 해당하는 파일을 사용자에게 제공한다. 웹 애플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간이 오래 걸리게 된다.

  • 게다가, 파일 하나 당 크기도 크다면 사용자는 요청한 웹 서비스를 받기까지 오랜 시간 기다려야 한다.그렇다고 파일 하나에 모든 스크립트를 작성하기엔 추후 유지보수 측면에서는 최악의 방법!!

⇒ 위의 문제들을 해결하기 위해, 웹 에플리케이션을 구성하는 여러 파일을 "하나로 묶는" 기능을 하는 번들러가 탄생하게 되었다.

Bundler는 어떤 일을 하는가?

• 웹 애플리케이션을 구성하는 파일을 "하나로 묶는" 기능

  • 브라우저에서는 각 파일 별로 요청을 보내지 않고 한번의 요청으로 모든 파일을 받을 수 있다.

• 각 모듈 간의 의존성 관계를 파악하며 올바른 순서로 모듈이 불러와지고 실행되는 것을 보장해준다.

• 트랜스파일러 및 컴파일러 역활도 겸한다.

Bundler Tools

🛠️ Parcel

• 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능 이라는 문구를 메인 문구로 사용하고 있는 이 번들러는 주장하길 webpack보다 2배 가량 빠른 속도의 번들링을 제공한다고 한다.

  • 장점1 : webpack의 귀찮은 초기 설정(webpack.config.js)과 같은 설정이 필요가 없다는 것

  • 장점2 : 단순히 설치하고 터미널을 통해 명령하는 것만으로 대부분의 명령을 실행할 수 있다는 것은 큰 장점

  • 장점3 : 소규모 토이 프로젝트를 진행할 때 사용하기 좋은 번들러

🛠️ webpack

• 2012년도에 출시한 현재 가장 많이 사용되는 번들러

• 가장 많이 사용하는 패키지인 CRA(create-react-app)에 기본으로 설치되어있는 번들러가 바로 Webpack

  • 장점 : 커뮤니티가 크고 오래된 만큼 수많은 서드파티 플러그인들을 사용할 수 있다.

  • 단점 : 이후 출시된 번들러들보다 상대적으로 느린 처리속도 그리고 번거로운 환경 세팅

🛠️ rollup

• webpack과 유사한 번들러

• Webpack과 Parcel의 경우 자체 로더를 통해 commonJS형태(require()형태)로 번들링이 진행되지만, Rollup의 경우 ES모듈(es6의 import, export)로 번들할 수 있다.

  • 장점 : 동원리에 따라 중복코드가 제거되지 않고 용량이 큰 webpack에 비해 중복코드가 제거되고 자체 용량이 작다.

  • 단점 : entry(in, out)이 많아질 수록 복잡도가 증가하고 plugin의 설정이 자유롭지 못하다.

✍🏻 Bundler Tools에 대한 나의 생각

• node.js 환경에서 개발을 해본적이 없다. parcel 설치하고 세팅해보면서 처음 번들러를 접해본다. webpack 단어는 많이 들어봤지만, 이게 번들러인지도 몰랐다

• Parcel,webpack,rollup, 정리한 3가지 번들러가 많이 사용되고 있다. 이것 말고도 새로운 번들러들이 생겨나고 있는 것 같다. 중요한 건 번들러의 동작 방식을 이해하고 프로젝트 마다 알맞은 번들러를 쓰는게 핵심이다. 그렇기에 번들러의 동작 방식에 대한 추가 공부가 필요해보인다.

🔗 참고

• 번들러란

• 번들러(Bundler)의 개념과 필요성

• 번들러란 무엇이며,어떻게 동작하는 걸까?

• 번들러(Bundler) 기초(모듈, parcel, webpack)

• Webpack 과 Parcel 그리고..next?