[프론트엔드] 번들러(Bundler)

목적

이 포스팅에서는 자바스크립트의 모듈화의 변화 과정과 번들러와 관련된 개념들에 대해서 알아봅니다.

 

모듈 시스템의 필요성

• 자바스크립트는 파일이 나뉘어도 모두 같은 전역 스코프를 사용하기 때문에 함수나 변수명이 겹치는 문제가 생길 수 있습니다. 따라서 스코프가 구분되는 모듈을 만들 필요가 있습니다.
• 파일이 많아질수록 응답시간이 오래걸리게 됩니다.

 

모듈 로더 (Module Loader)

런타임에 클라이언트 사이드에서 스크립트를 로드해서 html에 추가합니다. 아래와 같은 모듈 포맷이 있습니다.

• CommonJS
  : 브라우저에서 뿐만이 아니라 서버나 데스크롭 애플리케이션에서도 JavaScript 를 사용할 수 있도록한 모듈 시스템입니다. 특징은 동기적으로 모듈을 호출하는 방식으로, ( 필요한 모듈을 바로 사용할 수 있는 환경을 전제로 합니다. ) 비동기 방식보다 느리고, 순환 참조에 취약하다는 단점이 있습니다. Node.js 에서 채택한 방식입니다.
  
  
• AMD (Asynchronous Module Dfinition)
  : CommonJS 와 달리 브라우저에서의 실행을 우선하여 비동기 상황에서도 JavaScript 모듈을 사용하기 위한 모듈 시스템입니다. AMD 명세로 구현된 대표적인 라이브러리는 RequireJS 가 있습니다.
  
  
• UMD (Universal Module Definition)
  : CommonJS 와 AMD 을 모두 호환할 수 있도록 만든 패턴입니다.

 

ES6 Module

2015년에 JavaScript 언어 자체에서 지원하게된 모듈 시스템입니다. 비교적 최근에 정의되어 구형 브라우저에서는 제대로 동작하지 않는 단점이 있지만 아래와 같은 장점이 있습니다.

• 동기, 비동기 로드를 모두 지원합니다.
• 실제 객체, 함수를 바인딩하여 순환 참조 관리도 편합니다.
• 정적 분석이 가능하여 트리 쉐이킹이 쉽게 가능해졌습니다.
  * 정적 분석 : 실제 실행 없이 소프트웨어를 분석하는 것을 말합니다.
  * 트리 쉐이킹 ( Tree Shaking ) : 나무를 흔들어서 말라 죽은 잎을 떨어트린다는 의미로, import 되었지만 실제로는 사용되지 않는 코드를 삭제하는 코드 최적화 기술입니다.

 

트랜스파일러 (Transpiler)

트랜스파일러는 문법을 바꿔주는 역할을 합니다. ES6 Module 이 구형 브라우저에서 제대로 동작하는 않는 단점을 보완하기 위한 도구입니다.

• TypeScript Transpile : Type 이 있는 JavaScript > JavaScript
• SASS Transpile : SCSS > CSS
• Babel Transpile : ES6 JavaScript > ES5 JavaScript

 

태스크 러너 (Task Runner)

린트, 빌드, 테스트 등 일반적인 태스크의 자동화를 처리하는 도구입니다. Make, Grunt, Gulp 등이 있습니다. 이 중 빌드를 위한 태스크 러너의 한 과정이었던 번들링을 전문적으로 하는 도구가 모듈 번들러 입니다.

 

모듈 번들러 (Module Bundler)

모듈 로더를 대체하기 위해 만들어 졌습니다. Webpack, Rollup, Parcel, Browserify 등이 있습니다. 각 번들러의 상세한 장단점은 Tooling.Report 에서 확인할 수 있습니다. 모듈 번들러의 장점은 아래와 같습니다.

• 빌드 타임에 모듈을 묶어서 단일 번들 파일로 만들어주기 때문에 파일의 크기를 줄여 네트워크 지연을 줄여 줍니다.
• 트랜스파일러를 사용하여 모듈 시스템을 지원하지 않는 구형 브라우저에 대응할 수 있습니다.
• 코드 종속성 관계를 관리하는데 도움이 됩니다.

 

참고 자료

• JavaScript 번들러로 본 조선시대 붕당의 이해
• 의존성 관리
• 번들러
• 트랜스파일러란 무엇인가요?