번들러란 웹개발자가 하위 툴 그룹을 관리하는 데 도움을 주는 도구. 플러그인을 사용하여 하위 툴을 관리하는 meta-tool이라고 생각할 수 있다.
번들러가 필요한 이유는 자바스크립트 모듈의 특성때문이다. 원래 브라우저에서는 모듈을 지원하지 않는다. (2017년부터 브라우저에서도 Import를 사용할 수 있지만 단순히 다른 경로의 자바스크립트를 불러오는 기능만 한다) 흔히 import, export 구문으로 모듈 시스템을 활용하는 것은 브라우저가 아닌 자바스크립트 런타임 Node.js 위에서 가능한 일이다.
이러한 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용해야 하는데, 번들러는 이 모듈들을 하나의 파일로 묶어(bundle) 브라우저에서 돌아가도록 한다.
예를 들어 리액트에서는 index.js로부터 시작해서 많은 모듈을 사용하여 연결된 복잡한 구조를 단 하나의 파일로 만들어서 bundle.js와 같은 하나의 자바스크립트 파일을 내놓고, 이를 html에서 스크립트 태그로 불러오는 것이다.
번들러를 사용하면 웹개발과 관련해서 특히 아래의 3가지 장점이 있다.
웹 브라우저는 원래 HTML, CSS, 자바스크립트 3가지 언어만 해석할 수 있다. 이 언어들은 W3C, ECMA와 같은 기관에 의해서 스탠다드가 빠르게 진화한다. 그러나 보안과 안정성이 중요한 브라우저는 이 언어들의 스탠다드가 진화하는 만큼 빠르게 바뀔 수 는 없다. 하지만 개발자들은 더 생산적으로 코드를 짜기 위해 새로운 스탠다드를 이용하고자 한다.
또한 개발자들은 위 3가지 언어를 더 쉽고 간결하게 하기 위한 언어들을 만들었다. HMTL의 경우 Pug나 Haml, CSS의 경우 Sass, Less가 그렇다. 자바스크립트는 ES6(ECMAScript 2015), TypeScript, CoffeeScript 등이 있다.
이렇게 새로운 언어와 기준을 받아들이기 위해서는 브라우저의 직접적 지원이 필수적일까? 아니다. 브라우저가 이해할 수 있는 언어로 변환해주면 된다. (=트랜스파일) 번들러는 이런 일들을 자동적으로 해준다.
로컬호스트를 사용하여 웹앱을 개발하고 있다고 하자. HTML 파일을 수정한 뒤 결과를 브라우저 화면에서 확인하고 싶으면 파일을 저장하고 브라우저를 리로딩해야 한다. 이는 아주 귀찮은 일이므로 누군가 소스파일이 수정되면 자동으로 브라우저를 리로딩해주면 좋겠다.
또한 소스파일이 조금씩 수정될 때마다 브라우저가 전체 페이지를 리로딩하는 건 비효율적이다. 수정된 부분 일부만 리렌더링하여 보여주면 좋겠다.
자바스크립트 모듈을 사용할 때에 모든 페이지에 모든 모듈이 필요한 건 아니다. 그렇기 때문에 스크린마다 필요한 모듈만 로드된다. 만약 현재 스크린에 필요한 모듈이 수정된다면, 그 때마다 페이지가 리로딩되는 것을 원하지 않는다. 일부 모듈이 변경되었을 때 그 일부 모듈만 리로딩되면 좋겠다.
위에 언급된 부분을 번들러가 해결할 수 있다. 인기 있는 번들러는 HTTP Server 플러그인을 가지고 있다. 번들러는 소스파일의 변경사항을 watch 지켜본다. 그래서 파일이 변경되면 전체 페이지를 로딩하거나, 페이지를 리렌더링하거나, 특정 자바스크립트 모듈을 리로딩한다.
또한 TypeScript와 같이 높은 수준 언어로 쓰인 파일이 수정되면 브라우저가 리프레쉬되기 전에 트랜스파일이 먼저 진행되어야 하는데, 번들러의 플러그인은 이런 절차가 꼬이지 않게 도와준다.
우리가 코드를 작성할 때에는 보기 좋게 많은 빈 공간을 사용하며, 긴 변수명과 함수명을 사용한다. 이 형식화는 코드를 작성할 때에는 좋지만 브라우저가 해석할 때는 완전히 불필요한 것이다. 그러므로 브라우저에게 필요하지 않은 부분을 제거할 필요가 있다.(minify)
또한 복잡하고 큰 파일을 작성할 때에는 많은 파일과 폴더로 쪼개지기 마련이다. 그러나 프로덕션 환경에서는 여러개의 작은 파일보다 많은 파일을 다운로드하고 파싱하는 것이 빠르다. 그렇기 때문에 관련된 파일을 몇 개의 파일로 결합하는 과정이 필요하다. (concatenate)
C++이나 Swift와 달리 자바스크립트는 해석된(interpreted) 언어이다. 다른 사람도 쉽게 볼 수 있고 복사할 수 있다. 이를 방지하기 위해 앱 게시 전에 코드를 일부러 변형 및 암호화하는 것이 필요하다. (uglify)
위에 언급된 문제점들을 번들러가 해결해준다. 파일을 축소(minify)하고, 결합(concatenate)하고, 해독이 어렵도록 변형(uglify)해준다.
가장 보편적이고 인기있는 웹 번들러에는 Wepack, Grunt, Gulp 등이 있다.