Bundler란 무엇인가

프론트엔드 개발 관련 공부를 하다가 webpack, transpile등 단어는 들어봤지만 Bundler는 무엇일까? 모두 관련된 단어이다. 머릿속을 정리해보자.

🔍 Bundler가 등장하게된 배경

인터넷이 발달하고 웹 서비스의 규모가 커지게 되면서 방대한 양의 파일을 관리하기 어려워지는 문제가 발생했다.

예를 들어,

💡 중복된 이름 에러

두 개의 JS 파일에서 변수의 이름이 같은 부분이 있고, 이를 html에서 해당 변수를 반영한다면 어떻게 될까? 개발자는 둘 중 어느 파일의 변수를 사용해야하는지 구별하기 힘들다. 또한 이를 수정했다가 수정하면 안되는 변수라면? 큰 에러 문제가 될 것. 같은 함수명인 경우도 큰 에러를 발생 시킬 수 있다.

💡  파일 전송 문제

방대한 양의 파일 때문에 서버 요청에 대한 응답 시간이 길어질 수 있다. 물론 한 파일에 모든 스크립트를 작성한다면 문제를 해결할 수 있지만 유지 보수 측면에서 아주 불편하다.

이러한 문제점으로 인해, Bundler가 생겨났다. 대표적으로 webpack, parcel 등이 있다.

🧐 번들러 기능

어플리케이션에 필요한 모든 파일을 최소한의 파일 묶음(->번들) 으로 만들어 주고, 외부에서 파일을 알아보기 힘들게 변환(uglyfy), 모든 브라우저에서 최신 문법의 JS파일을 작동시킬 수 있게 해준다.(transpile)

✨ 번들러 사용의 장점

1. 네트워크 병목 현상 해결: 파일을 한 묶음으로 묶어주어서 전송할 파일 크기를 줄여준다.

2. 모듈 단위 코딩 가능: 유지 보수를 편하게 할 수 있음

3. 다양한 서드 파티 기능 이용 가능: webpack 이용시, babel-loader를 이용하여 최신 JS 나 SASS 를 사용할 수 있다.

 

참고

[JavaScript] 번들러(Bundler)란?