번들러(Bundler)
번들링(Bundling)이란 기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 합니다. 주로 JavaScript를 위한 번들러지만 플러그인 등을 통해 HTML, CSS, 심지어 이미지까지 압축하거나 최적화를 합니다.
번들링의 시작을 쉽게 설명하면 프로젝트가 커져감에 따라 JavaScript 파일들을 여러 개로 나누어 관리하게 되었고, 웹에서 파일을 다운받을 때 여러 개로 나누어서 다운받는 속도보다 하나로 뭉쳐서 다운받는 것이 훨씬 빠르기 때문에, 작업할 때는 여러 개로 나누어서 작업하고 최종적으로 웹서버에 올릴 때는 하나의 파일로 압축하여 올리게 된 것이 시초입니다.
이후 여러 가지 플러그인들이나 기능들이 더해져서 단순히 파일만 합치는 작업이 아니고 앞서 언급한 CSS Preprocessing과 이미지 최적화 등 다양하게 확장되게 되었습니다. 지금은 대부분의 JS 프레임워크들에 기본으로 장착이 되어 있어 추가 설치나 설정없이 바로 쉽게 사용이 가능하나 오픈소스 라이브러리등을 직접 제작할 때는 해당 번들러를 직접 설치하고 설정할 줄 알아야 합니다.
다음은 대중적으로 많이 사용하는 번들러 선택지입니다.
Webpack
웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.
Rollup
Webpack이 Tree Shaking이 잘 지원이 안되던 시절, Webpack의 단점들을 보완하고 Tree Shaking을 최적하하기 위하여 나온 도구입니다. Webpack 보다 점유율은 조금 떨어지지만 가볍고 빨라서 많이 사용되고 있습니다.
Tree Shaking이란?
Tree Shanking이란 번들링을 하다보면 실제로 사용하지 않는 함수들이나 모듈들까지 같이 팩킹(Packing)이 되는데, 팩킹 전에 사용하지 않는 함수와 모듈들을 떨쳐내어 최종 결과물을 컴팩트하게 만드는 것입니다. 마치 나무를 흔들어서 죽은 낙엽을 떨쳐내듯 하다고 하여 Tree Shaking(나무 흔들기)라고 합니다.
Parcel
제일 최근에 나온 도구로써 Webpack, Rollup 등 장단점을 최대한 살려 결합한 형태입니다. 기존 레거시 프로젝트들과 호환성이 떨어지고 레퍼런스가 부족하지만 현재 추세나 점유율이 많이 올라가고 있는 상황입니다.
Reference
