[JavaScript] 번들러(Bundler)란?

1. 번들러(Bundler) 탄생 이전

초기의 웹 애플리케이션의 규모는 지금과 같이 크지 않았다. 그러나 기술의 발전으로 컴퓨터 성능이 좋아지고, 네트워크 속도도 빨라지면서 자연스럽게 웹 애플리케이션의 규모 또한 커져갔다. 이로 인해 파일의 양은 늘어났고, 그에 따라 다양한 문제를 야기했다.

​

하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘씩 문제들이 발생하기 시작했던 것!

​

1) 중복된 이름으로 인한 에러

대규모의 웹 페이지의 경우 수백 수천개의 자바스크립트 파일이 있고, 여러 사람이 관리하다보니 함수명이나 변수명을 똑같이 짓는 일이 일어날 수 있다. 이때 예상치 못한 에러가 발생할 수 있다.

​

2) 파일로 인한 문제

사용자가 요청을 보내면 서버는 웹 애플리케이션을 구성하는 파일들을 보내게 된다. 웹 애플리케이션을 구성하는 파일의 양이 많다면, 사용자의 요청에 응답하는 시간이 길어지게 된다.

​

서버가 파일 1개를 요청하고 응답하는데 1초가 걸린다고 가정하면, 100개의 파일을 응답하는 데 100초, 1000개의 파일을 응답하는 데 1000초의 시간이 걸리게 된다. 거기에 수많은 사용자가 웹 사이트를 이용할 경우, 응답을 제때 하지 못해 네트워크 병목 현상이 일어날 수 있다.

​

만약 파일의 양을 줄이기 위해 하나의 js 파일에 모든 변수, 함수를 추가한다고 하면 속도는 빨라지고 네트워크 병목 현상을 피할 수 있겠지만, 개발자의 입장에선 수천 수만 줄의 코드를 유지보수 해야 하기 때문에 가독성이 상당히 좋지 않을 것이다.

​

​

2. 번들러 등장

이러한 문제들을 해결하기 위해 번들러(Bundler)가 등장하였다. 번들러를 간단히 설명하면, 여러 개의 파일을 하나의 파일로 묶어주는 역할을 한다. 번들러에는 대표적으로 webpack, parcel, browserify가 있다.

​

사실 번들러는 단순히 자바스크립트 파일들 뿐만 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어 낸다. 뿐만 아니라 자바스크립트 파일을 외부에서 알아보기 힘들게 코드를 변환하는 작업(Uglyfy)을 한다거나, 최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있게 ES5문법으로 변환(Transpile)을 지원한다.

​

때문에 번들러를 사용하게 되면 다음과 같은 장점들이 있다.

1. 네트워크 병목 현상 해결

여러 개의 파일을 최적화해서 하나의 파일로 묶기 때문에 주고 받는 파일의 크기를 줄여줆

2. 모듈 단위 코딩

유지 보수가 편함. 코드의 가독성 향상

3. 다양한 서드파티 기능 이용

Webpack의 경우 Babel-loader와 같은 다양한 로더를 이용해서 모던 자바스크립트나 SASS를 사용할 수 있다.

​

가장 대표적으로 쓰이는 번들러는 Webpack

Webpack은 여러 장점을 가지고 있다.

• 10년 동안 개발, 관리되며 Plugin, Loader 등 생태계가 잘 갖춰져 있다
• Code Splitting이나 Tree Shaking 등을 잘 지원한다
• 모듈을 IIFE 방식으로 묶어주어 여러 브라우저를 지원할 수 있다
• 다양한 Boilerplate에서 쓰고 있어 자료가 많다.

​

참고

https://velog.io/@eastshine94/Bundler-%EC%99%9C-Bundler%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94%EA%B0%80

https://blog.leehov.in/24​

[JavaScript] 번들러(Bundler)란?

[Bundler] 왜 Bundler을 사용해야하는가?