번들러 ?
여러개의 자바스크립트 파일을 하나의 개별 파일로 연결&병합. 큰 규모의 프로젝트를 진행하거나 다수의 파일 또는 다양한 라이브러리와 dependencies를 다루는 프로젝트에 사용하면 유용하다. 결과적으로 클라이언트가 각각의 파일을 개별적으로 호출함으로서 일으키는 성능저하를 예방/방지 할 수 있다.
Why 번들러 ?
<html>
<head>
<script type="module" scr="index.js">
</script>
<link rel="stylesheet" href="somethingLib..."/>
</head>
<body>
<p>hello</p>
</body>
</html>간단하게 HTML을 구성해보았다. 해당 파일 실행시, script태그를 만나면 자바스크립트 파일이 다운로드 및 실행 될 것이고, link태그를 통한 라이브러리 또한 같다. 이때 자바스크립트 파일이 한개가 아닌 여러개일때 클라이언트에서는 한개의 자바스크립트 파일을 다운받는것이 아닌 모든 자바스크립트 파일을 다운로드 받는다.
예를 들어, 프로젝트를 진행할때 lodash와 같은 유용한 메소드를 제공하는 라이브러리를 매번 추가하곤 하지만, 단 한개 만의 메소드를 사용한다고 해도 해당 자바스크립트 파일 전부를 다운로드 받게 되는것이다.
결과적으로 번들러를 사용하지 않을시, 새로운 페이지를 방문 할 때마다 매번 모든 파일을 전부다 다운로드 받게되고 이는 네트워크에 부담을 주게된다. 당연히 프로젝트의 규모가 커질수록 부담이 커지게되고 이는 성능저하로 연결되 사용자 경험에 부정적인 영향을 주게된다.
번들링 (bundling) ?
의존성 그래프 생성 => 필요 요소들의 번들링
번들러는 파일들에 대한 의존성을 파악하고, 각 파일에 대한 의존성을 나타내는 그래프(또는 맵)를 이용해 패킹과정을 통해 클라이언트에서 요청 파일에 대한 의존성을 가진 기능(파일)에 대한 정보만을 다운받을 수 있도록 합니다.
⭐ 번들러는 의존도 그래프를 활용하여 파일, 기능 등의 이름(네이밍) 중복으로 인한 오류를 사전에 방지합니다.
⭐ 패킹 - 의존성 그래프를 통해 클라이언트/브라우저에서 문제없이 사용 가능하도록 준비하는 단계로서, 파일, 플러그인, 함수 등을 묶어 번들을 제작.
어떤 번들러 ?
현재 가장 많이 사용되는 Webpack,
매우 빠른 번들링 속도를 제공하는 Esbuild,
비교적 작은 크기의 번들을 제공하는 Rollup,
Rollup, Esbuild를 혼합하여 제공하는 Vite
각 번들러는 장단점을 가지고 있기에 공식페이지를 통해 기술문서를 보며 자신의 필요에 따른 최적의 기술 선택을 하는것이 좋다고 생각됩니다.
