번들링(Bundling)과 번들러(Bundler)

Image from Rich Harris's post

번들링

 번들링(Bundling)이란 기본적으로 여러 개로 흩어져 있는 파일들을 하나의 파일로 모아주는 역할을 합니다. 더 정확하게 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업입니다.

 

 하나의 파일에 많은 코드를 작성하게 되면 가독성이 떨어지고 그렇게 되면 코드를 관리하기가 어려워집니다. 그렇기 때문에 관련된 기능을 하나로 묶어 다른 코드와의 결합도를 줄이고, 재사용성을 높이기 위해 모듈화를합니다. 하지만 이렇게 되면 웹페이지에서 많은 양의 파일을 한번에 로드해야 하고 네트워크 병목현상이 발생할 수 있습니다.

 

 번들링을 통해 이 문제를 해결할 수 있습니다. 작업할 때는 여러 개로 나누어서 작업하고 최종적으로 웹서버에 올릴 때는 하나의 파일로 압축하여 올리는 것 입니다. 번들링을 이용하게 되면 이전에 각 파일들마다 서버에 요청을 하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 코스트가 줄게 되고 일부 브라우저에서 지원이 되지 않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 모든 브라우저에 대해서도 커버가 가능하게 됩니다.

 

번들러

 대중적으로 많이 알려진 번들러는 크게 3가지가 있습니다.

Webpack

• 현대 Javascript Application의 Static Module Bundler입니다.
• Webpack은 JS 파일 뿐만 아니라, CSS, HTML, Image 등을 모듈로 로드해서 사용할 수 있습니다. 
• 코드를 압축, 최적화 하는 기능들을 제공하며, 번들링된 파일이 너무 무거워질 경우 다시 여러 개의 파일로 나눌 수 있는 코드 스플리팅(Code Spliting) 기능도 제공합니다.
• 핵심 개념으로 Mode, Entry, Output, Loader, Plugin가있습니다.

Rollup

• webpack과 다르게 코드들을 동일한 수준으로 호이스팅 한 후 한 번에 번들링을 진행하기 때문에 속도에서는 webpack보다 빠르고 결과물도 훨씬 가볍습니다.
• ES 모듈 형태로 빌드를 할 수 있어 라이브러리나 패키지를 작업하는데 활용할 수 있습니다.

Parcel

• Parcel은 설정이 필요 없습니다. Zero-Configuration
• Parcel은 캐싱을 사용하여 빌드 속도가 빠릅니다.
• Parcel은 많은 트랜스파일러를 내장 지원하고 있기 때문에 모듈 안의 설정파일(.babelrc, .postcssrc 등)을 발견하면 이를 자동으로 변환하여 실행합니다.