번들러 (bundler)

번들러 (bundler)

의존성 있는 '모듈 코드/파일' 들을 하나로 묶어서 관리가 가능하다.

 

추가 개념

---

1. Babel

- Babel은 ES6이상 문법을 ES5문법으로 번역해 준다. 근데 ES5 자체에 존재하는 않는 함수들은 번역 자체가 불가능하니 이걸 메꾸기 위해 polyfill을 사용(Map, Promiss, Set 등을 사용 가능한 객체로 만든다.)

2. polyfill

- ES5 자체에 존재하지 않는 함수들, 브라우저에서 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 것이다.

- 하위 자바스크립트의 코드를 사용해 최신 기능과 똑같이 구현하는 방식을 뜻한다.

---

Bundler의 장점

1. 여러 이유가 있겠지만, HTTP는 단방향 통신이기에 요청 할 파일이 많으면 계속 요청을 해야하니 번들링하여 묶으면 요청 횟수가 적어져 리소스도 덜 차지하고, 속도가 개선된다. (합리적인 로딩시간 = 3초 이내)

 

2. 구형 브라우저(ES6 이전)에도 코드가 돌아가도록 polyfill을 작성해야하는데, Babel을 사용하면 코드를 변환할 수 있다(보통 해당 기능이 Bundler에 포함되어 있음, 이걸 번들러만의 장점으로 봐야할 진 모르겠네)

 

번들러는 어떻게 의존성이 있는 파일을 묶을까?

내부 로직은 자세히 모르겠다. 하지만 번들러들이 의존성을 분석하여 이 모든 것을 하나의 파일로 만들지에 대한 의존성 그래프를 생성한다. 사용자(우리)는 단지 진입점만 지정 해 놓으면 된다.

(추후에 한번 번들러를 만드는 실습을 가져보자)

 

대표적인 Bundler

1. Webpack

2. Rollup

3. Parcel

 

 

참고:

https://db2dev.tistory.com/entry/%ED%8F%B4%EB%A6%AC%ED%95%84Polyfill%EC%9D%B4%EB%9E%80

https://ahnanne.tistory.com/7

https://www.seonest.net/posts/Bundle3-Module-Bundler