Bundler
Module Bundler란?
제이널
2022. 1. 18. 15:30
웹 페이지는 순수하게 HTML, CSS, JavaScript로 만들 수 있지만, 애플리케이션의 크기가 커질수록 복잡해지고, 파일이 많아짐에 따라 다양한 문제를 야기시킵니다.
- 협업하면서 생기는 이름 충돌
- 서버에 여러 파일을 요청하면서 생기는 네트워크 병목 현상
1. Module Bundler가 필요한 이유
아래와 같이 JavaScript를 포함하는 애플리케이션이 있다고 가정해 보겠습니다.
<html>
<script src="/src/foo.js"></script>
<script src="/src/bar.js"></script>
<script src="/src/baz.js"></script>
<script src="/src/qux.js"></script>
<script src="/src/quux.js"></script>
</html>위 예제의 경우, 애플리케이션을 실행하기 위해 5개의 HTTP 요청이 필요합니다. 병목 현상을 피하기 위해, 이 파일들을 하나로 묶을 수도 있을 것입니다.
<html>
<script src="/dist/bundle.js"></script>
</html>
하지만, 파일을 하나로 합쳐서 관리하기엔 너무 복잡하고 크기가 커집니다. 또한, 각 파일에서 사용하던 변수와 함수의 이름이 겹칠 수도 있겠죠.
Angular와 같은 최신 JS 프레임워크를 예로 들면, 파일들을 수동으로 추적하기에는 파일이 너무 많고, 프로젝트의 라이브러리 종속성을 관리하기 어렵습니다.
위의 모든 문제를 해결해서 이름 충돌이나 범위 문제 없이 모든 것을 병합하더라도, 너무 많은 개발 시간을 소모하면 거대한 JS 파일이 생성될 수 있습니다. 병합된 파일은, 최적화되지 않은 방식으로 함께 병합되어 있기 때문에, 웹사이트의 로딩 시간을 상당히 증가시킬 것입니다.
2. Module Bundler
간단히 설명하면, 모듈 번들러는 위와 같은 문제를 해결해서 개발 시간을 단축시켜줄 수 있는 프런트엔드 개발 도구입니다. 모듈 번들러는 HTML, CSS, JS, 이미지 등의 파일에 대한 라이브러리를 매핑하고, 라이브러리의 종속성 그래프를 만들어서 결과물을 실제 웹 페이지가 필요한 파일로 변환하고 묶어주는 역할을 합니다.
- 개발자가 프로젝트의 종속 관계를 관리할 수 있도록 도와줍니다.
- 종속성 순서로 모듈을 로드할 수 있게 도와줍니다.
- 코드를 변환해서 최적화, 최소화하여 동작하게 합니다.
3. 마치며
최신 모듈 번들러의 종류는 webpack, rollup, fusebox, parcel 등이 있습니다.
잘 알려진 webpack은 꼼꼼한 구성으로 되어 있어서 중/대형 프로젝트에 적합하지만, 설정이 쉽지 않다는 것이 특징이고,
parcel은 단순한 설정과 자동 번들링이 장점이지만, 구성이 비교적 적어서 소/중형 프로젝트에 적합하다는 것이 특징이라고 합니다.