번들링이란?

 

 

 

흔히 말하는 Bundling이라는 용어는 어떤 제품을 묶음으로 판매하는 것을 말한다. 

 

출처: webpack

웹 개발에서 Bundling 

그럼 웹 개발에서 번들링을 한다고 하면 무슨 의미일까? 

번들링은 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다.

우리가 만든 파일들을 하나로 합쳐서 이제 서버에 배포하기 위한 과정(빌드)을 거치게 된다.

빌드 명령을 실행하면 대부분의 도구는 빌드와 번들링을 동시에 수행하니까 동일한 의미로도 사용되기도 한다.

개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 Bundling한 파일을 받아와 이 브라우저가 이 Bundle을 실행한다. 

 

번들링을 하는 이유는?

대표적인 이유는 우리가 만든 .ts, .vue., .jsx 파일들을 .js 파일로 변환해주고, 최신 문법을 호환성 좋게 바꿔준다. 

더 자세한 이유를 들여다보자.

 

📂 파일 크기 문제 해결

우리가 어떤 파일이나, 사진이 많을때 알집이나 여러 프로그램을 이용해서 압축해 본 경험이 있을 것이다. 그거랑 비슷하다. 번들 파일은 번들링을 거치지 않은 원본 프로그램 파일보다 크기가 작아지고 실행속도, 로딩 속도 또한 빨라진다. 특히 안쓰는 함수나 변수는 다 제거되니까 용량축소가 가능하다. 

 

🗃️ 파일 단위의 js 모듈 관리의 필요성

JavaScript에서 변수는 기본적으로 "전역 범위"를 가지기 때문에 하나의 프로젝트 폴더에서 여러 개의 .js 파일이 있더라도 서로 변수를 공유하게 된다. 

근데 여기서 변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러를 번들링 도구인 Webpack에서는 모듈 번들링으로 해결한다. 

 

🛡️ 애플리케이션 임의 조작 방지

 압축한 파일을 받아와 압축해제 전까지 파일을 조작할 수 없는 것처럼, 번들링된 웹 애플리케이션도 사용자가 임의로 조작할 수 없다. 

번들링되지 않은 원본 코드에 사용자가 접근할 수 있다면, 조작의 위험이 발생할 수 있다. 

 

 

번들러 종류

 

최근 1년간 npm 다운로드 순으로 보면 webpack > esbuild > rollup > vite > parcel > snowpack이다 .

 

stateofjs 2022

State of JavaScript에서 제공하는 전체적인 순위에서는 vite, esbuild가 1, 2인 것들을 볼 수있다. 그리고 Rust로 짜여진 컴파일러인 Swc는 3위로 급등했다. 다운로드 수가 가장 많은 webpack은 2017년에서는 1위였지만 지금은 하위권의 수준에 머물러있다. 

 

번들러마다 장점/단점이 있으니 내가 필요한 번들러를 적재적소에 쓰면 좋을 거 같다.