[Frontend] 번들러(Bundler)

이승준·2023년 2월 24일
0

Tlog.Frontend

목록 보기
1/3
post-thumbnail

번들러(Bundler)

탄생 계기

HTML, CSS, Javascript로 웹 개발을 할 때, 필요한 파일들이 그렇게 많지 않은 초창기 웹 시절에 비해서 많은 발전이 있었습니다.

현재 웹, Javascript의 발전과 함께 다양한 모듈들이 생겨났는데요. 서버와의 통신을 위한 모듈, 서버 사이드 렌더링에 필요한 모듈, Virtual Dom을 작동시키기 위한 모듈 등 많은 모듈들을 필요로 하게 됐습니다. 당장 프로젝트를 시작하고 생긴 node_modules폴더에 있는 수많은 폴더들만 봐도, 정말 많은 모듈들이 필요하다는 사실을 알 수 있죠.

번들러가 없다면, 이런 프로젝트들을 베포했을 때, 해당 프로젝트에서 필요한 파일들을 응답해야합니다. 그럼 결국 클라이언트의 요청에 대한 응답에 엄청난 시간이 걸릴 것이고, 응답을 제때 하지 못하는 네트워크 병목현상을 초래할 수도 있죠.

이러한 상황을 방지하기 위해서, 클라이언트의 요청에 하나의 JS파일만을 응답하고자 했습니다. 그러나 그 수많은 모듈들을 하나의 JS파일에 몰아 넣으면, 수만줄의 코드를 한 파일에서 관리해야하는 끔찍한 상황이 발생하죠.

여기서 이러한 과정을 알아서 해주는게 모듈 번들러(Bundler)입니다.

Tree shaking

이렇게 탄생한 번들러 덕분에, 개발자들은 기능단위로 코드들을 모듈화 시켜서 개발을 할 수 있게 됐습니다. 이는 대형 프로젝트를 진행할 때 유지 보수 측면에서 엄청난 이득이죠.

더 나아가, 번들러는 Tree shaking도 지원을 해주는데요.

Tree shaking은 나무를 흔들어서 죽은 나뭇잎을 떨어트리는 것처럼 사용하지 않는 코드를 번들에서 제외시키는 과정입니다.

이렇게 번들러는 번들링 과정에서 각 모듈들 사이의 의존성을 파악한 뒤, 사용하지 않는 코드들은 번들에 포함시키지 않는 Tree shaking의 과정을 거치기 때문에, 작성한 코드들의 용량을 줄여 네트워크 응답 속도 및 성능에 좋은 영향을 끼칩니다.

구형 브라우저 지원

현재 개발자들이 주류로 사용하고 있는 Javascript 문법은 ES6 이상의 문법입니다. 그러나 일부 구형 브라우저들은 ES5만 지원하는 경우가 있죠. 번들러는 로더를 통해 ES6 이상의 코드들을 ES5로 변환시켜주는 작업을 할 수 있고, 덕분에 구형 브라우저도 지원할 수 있도록 해줍니다.

요약

웹 사이트의 규모가 커지면서 변수명 중복, 파일 요청 횟수에 대한 문제 등 다양한 문제가 발생하면서 번들러가 등장하게 됩니다.

번들러를 통해 모듈단위의 코딩이 가능해졌고, Tree shaking을 통해 사용하지 않는 모듈을 번들에서 제외시킴으로써 더 좋은 성능을 이끌어내기도 합니다. 또, 구형 브라우저를 지원할 수 있도록 ES5 문법으로의 변환까지 지원해줍니다. 이처럼 베포단계에서의 최적화와 개발 과정에서의 여러가지 편의를 제공해주는 것이 바로 번들러입니다.

profile
인터랙티브 웹부터 풀스택, web3 등 다양한 분야에 관심을 가지고 다양한 일을 이루기위한 수단으로서 개발합니다.

0개의 댓글