모듈 번들러란?
지난번에 알아본 모듈 시스템이 목적이나 기능에 따라 코드를 분리하는 것이었다면 모듈 번들러는 이처럼 분리된 코드를 하나의 파일로 병합하는 개발 도구를 말한다.
즉 모듈 번들러란 JavaScript 모듈을 브라우저에서 실행할 수 있는 단일 JavaScript 파일로 묶는데 사용되는 도구이다. 모듈 번들러는 크게 세 가지 이유로 사용된다.
- 모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다.
- 코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다.
- 이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다.
최근에는 번들러 자체에서 개발과 빌드, 최적화를 위한 각종 플러그인을 제공하고 있으므로 별도의 최적화 도구를 사용하지 않아도 되게 되었다. 이것이 바로 모던 웹 애플리케이션을 작성할 때 일반적으로 별도의 추가적인 툴을 사용하지 않는 이유이다.
대표적인 모듈 번들러로는 Webpack, Pacle, Rollup이 있다.
Webpack
프론트엔드 개발을 하다보면 한번쯤은 들어봤을 웹팩은 오래되어 생태계가 풍부하고 안정성이 뛰어난 번들러이다.
웹팩의 장점은 아래와 같다.
- 서드파티 라이브러리 관리, CSS 전처리, 이미지 에셋 관리 유리
- 코드 스플리팅에 있어 롤업과 파셀이 더 뛰어나지만 안정성이 높아 코드 스플리팅이 활성화된 단계에서는 빌드 시간이 웹팩이 가장 빠름
- 웹 애플리케이션에서 사용하는 CSS나 이미지 에세들을 JS 코드로 변환하고 이를 분석해서 번들링
- 구성이 복잡하고 설정할 게 많음
- 개발 서버가 뛰어남 라이브리로딩, HMR 기능 지원
- webpack-dev-server 플러그인 설치시 동작
- 트리 쉐이킹 지원 but commonJS to ES6, 별도의 플러그인 설치 필요
Rollup
- ES6 모듈 형식으로 빌드 결과물을 출력할 수 있어 라이브러리나 패키지 개발에 활용이 가능하다.
- 웹팩과 파셀과 달리 자체 로더가 아닌 ES6 모듈을 기본으로 한다.
- 코드 스플리팅에 강점을 가지며 중복 제거에 특화되어 있고 특히 entry point가 여러 개 있을 경우 이 부분이 두드러진다.
- 웹팩에 대한 최소한의 대안이며 소규모 프로젝트에 적합하다.
- 규모가 커질수록 설정이 복잡해진다.
Pacel
- zero-configuration으로 설정없이도 동작하며 빌드를 위해 번들러를 학습하는 시간을 줄일 수 있음
- javascript 엔트리 포인트를 지정해주는 것이 아닌 애플리케이션 진입을 위한 HTML 파일을 읽어 나가며 js, css, image asset 등을 직접 참조함
- ES6, commonJS 모듈 모두에 대해 트리 쉐이킹을 지원한다.
- HMR 지원
결론
많은 서드파티를 필요로 하는 복잡한 어플리케이션이라면? 웹팩
최소한의 서드파티로 라이브러리 만들고 싶다면? 롤업
복잡한 설정을 피하고 간단한 어플리케이션을 만들고 싶다면? 파셀
세가지 모듈 번들러를 모두 사용해보고 직접 비교해 본 것은 아니기 때문에 다음에 기회가 된다면 세 번들러를 모두 사용해보고 직접 비교해보면 좋을 것 같다!
꾸준히 열심히!