모듈 번들러(Module Bundler)란❓
“여러 파일들을 하나로 결합하여 단일 파일로 만들어주는 개발도구”
모듈 번들러는 이름의 단어 그대로 여러개의 파일(모듈)을 묶어주는 개발도구입니다.
지난 [JAVASCRIPT] 모듈(module) 포스팅에서 언급 했듯 개발을 하면서 작성한 수 많은 코드들을 각각의 기능으로 나누어 관리한다고 했습니다.
프론트엔드 개발의 가장 큰 특징은 “모듈 단위로 나누어진 수많은 라이브러리와 파일들(.js, .jsx, .css, .jpg 등)을 서로 결합하여 개발”을 한다는 것입니다.
개발하는 웹 어플리케이션의 규모가 커짐에 따라 만들어지고, 사용하는 파일의 수와 종류가 엄청나게 증가하게 됩니다. 외부에서 가져와 사용하는 수많은 라이브러리들과 작성한 여러 파일들을 개발자가 스스로 이것들을 관리하는 것은 매우 어려운 일이 될 것입니다.
이때 각각의 모듈은 서로에게 의존성을 띄면서, 모듈 단위로 나누어진 그대로 서버에 올려 배포를 하였을 때 여러 문제들이 발생합니다.
수 많은 모듈들의 의존성 처리 (import,export 문제)
웹 페이지 접근 시 모듈의 개수 만큼 많아지는 HTTP 요청
- 요청하는 파일의 양이 많아지면서 네트워크 효율성 떨어짐 (병목현상)
- 사용자에게 보여지는 렌더링에 큰 성능저하를 가져옴
브라우저 호환성 (ES6+ 미지원 등)
- 최신 ES6+ 문법을 지원하지 않는 오래된 브라우저에서 정상적으로 동작하지 않음
이러한 몇가지 문제들을 해결하기 위해 등장한 것이 “모듈 번들러”입니다.
모듈 번들러 장점
모듈 번들러를 사용하게되면, 위에서 언급한 문제들을 해결하면서 동시에 개발의 편의성과 더 나은 성능을 제공합니다.
“네트워크 병목 현상 해결”
한 번의 요청으로 대부분의 파일을 받아올 수 있게 한다. 한번 요청을 받아오게 되면 사용하면서 더욱 부드럽고 빠르게 동작하게 해줍니다.
또한 서로 나누어져 있던 모듈들을 하나의 파일로 합쳐서 가져오기 때문에 각각의 파일에서 import, export를 하는 의존성 문제도 자연스럽게 해결이 됩니
이때생길 수 있는 변수 충돌 문제도, 자체적으로 변환해주어, 자연스럽게 해결해 줍니다.
여러 브라우저에서 잘 돌아가도록 해준다.
현재 대부분의 브라우저에서는 최신 JS문법을 지원하기는 하지만, 여전히 많은 곳에서 (구) 버전의 브라우저를 사용하는 곳이 많습니다.
그래서 ES6+ 등 최신 문법들을 제공하지 않는 브라우저에서도 잘 동작할 수있도록 ES5 에 맞게 코드를 변환해주어 오래된 버전의 브라우저에서도 잘 동작할 수 있도록 해줍니다.
모듈 번들러의 종류
Webpack
오래되어 생태계가 풍부하고, 안정성이 뛰어나 가장 널리 사용되는 모듈 번들러
장점
- 강력한 커스터마이징이 가능
- 로더와 플러그인 시스템을 통해 다양한 파일 타입과 복잡한 프로젝트 구조를 관리 가능
단점
- 구성이 복잡하고 설정할 게 많음
Rollup
ES6 모듈을 중심으로 설계되었으며, 라이브러리와 프레임워크 개발에 적합한 번들러
장점
- 최소한의 서드파티로 이용가능
- 중복 제거에 특화되어 있음
- 트리 쉐이킹(tree-shaking)을 제공하여 불필요한 코드를 제거
단점
- 웹팩에 대한 최소한의 대안이며 소규모 프로젝트에 적합
- 규모가 커질수록 설정이 복잡해짐
Parcel
"제로 설정" 모듈 번들러
장점
- 캐싱을 사용하여 빠른 빌드 속도를 제공하고, 사용의 용이성이 특징
- HMR(Hot Module Replacement)를 지원
단점
- 상대적으로 작은 커뮤니티
Browserify
“Node.js 스타일의
require()호출을 사용하여 모듈을 브라우저에서 사용할 수 있게 해주는 번들러”
장점
- Node.js 기반 모듈을 브라우저에서 사용 가능, 플러그인과 변환기 사용
단점
- 다른 번들러에 비해 업데이트와 유지 보수가 덜 활발
모듈 번들러 선택 시 고려사항
앞서 알아본 각각의 모듈 번들러의 특성들을 고려하여 내가 지금 작업하려고 하는 프로젝트의 규모나 사용하는 기술 스택, 필요한 기능, 설정의 복잡성 등에 따라 적합한 모듈 번들러를 선택해야 합니다.
대부분 엔터프라이즈 급 기업에서는 커스터 마이징이 가능한 Webpack을 가장 많이 사용하고 있습니다.
최근에는 Vite라는 강력한 번들러가 나오면서 엄청나게 각광을 받고 있습니다. Vite 에 대해서는 따로 포스팅을 올려보도록 하겠습니다.
참고
