Bundling & Transpiler

이번에는 번들링(Bundling)과 트랜스파일(Transpile) 두 가지 주제에 대하여 얘기합니다. 번들링과 트렌스파일은 독립적인 주제이기는 하나 대부분 빌드 툴 체인(Build Tool Chain)이라는 큰 주제에 같이 묶여서 사용되게 됩니다.

TIP

빌드 툴 체인이란 소스를 빌드하는 과정 전반에 걸처 필요한 도구들로써 Bundling 및 Complie 또는 Transpile, Profile, Coverage, Testing 등 상당히 넓은 영역을 가지고 있고 여기서는 그 중에 필수적인 두 가지에 대해서만 먼저 다루게 됩니다.

Complie vs Transpile

Complie이란 작성된 코드를 기계가 이해 할 수 있는 바이너리 코드로 바꾸는 것이고 Transpile이란 언어 대 언어로 변형하는 작업을 의미합니다.

• Complie: 언어 => 기계
• Transpile: 언어 => 언어

보통 새로운 문법이 나왔는데 아직 벤더(Vendor)들이 해당 기능을 다 구현하지 못한 경우, 코딩은 신규 문법으로 작성하고 Transpile한 결과는 예전 문법으로 작성해주는 방식입니다. JavaScript와 같이 표준을 만드는 집단(ECMA International)과 해당 기능을 제공하는 Vendor들(브라우저 제작사: Chrome/Google, Safari/Apple, Firefox/Mozilla, IE/Microsfot등)이 다분화되어 있는 경우, 표준과 Vendor들의 지원 현황이 속도가 맞지 않아서 자주 사용되는 기법입니다. 앞서 설명한 Less, Sass, Stylus > CSS 로 변환하는 것도 Transpile의 일종입니다.

번들러(Bundler)

번들링(Bundling)이란 기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 합니다. 주로 JavaScript를 위한 번들러지만 플러그인 등을 통해 HTML, CSS, 심지어 이미지까지 압축하거나 최적화를 합니다.

번들링의 시작을 쉽게 설명하면 프로젝트가 커져감에 따라 JavaScript 파일들을 여러 개로 나누어 관리하게 되었고, 웹에서 파일을 다운받을 때 여러 개로 나누어서 다운받는 속도보다 하나로 뭉쳐서 다운받는 것이 훨씬 빠르기 때문에, 작업할 때는 여러 개로 나누어서 작업하고 최종적으로 웹서버에 올릴 때는 하나의 파일로 압축하여 올리게 된 것이 시초입니다.

이후 여러 가지 플러그인들이나 기능들이 더해져서 단순히 파일만 합치는 작업이 아니고 앞서 언급한 CSS Preprocessing과 이미지 최적화 등 다양하게 확장되게 되었습니다. 지금은 대부분의 JS 프레임워크들에 기본으로 장착이 되어 있어 추가 설치나 설정없이 바로 쉽게 사용이 가능하나 오픈소스 라이브러리등을 직접 제작할 때는 해당 번들러를 직접 설치하고 설정할 줄 알아야 합니다.

다음은 대중적으로 많이 사용하는 번들러 선택지입니다. 번들러에 대한 모든 설정은 양이 방대하고 복잡하여 각 홈페이지를 참고하길 바라며 여기서는 간단한 설명만 하고 실제로 사용 예제는 Guides에 포스팅할 예정입니다.

Webpack

공식 홈페이지: Webpack

Webpack은 현재 제일 많이 사용되는 번들링 도구입니다. 글을 쓰는 시점에서 최신 버전은 Webpack4 이며 오래된 만큼 레퍼런스도 많고 플러그인도 많습니다. Webpack3까지는 Tree Shaking 이 잘 지원되지 않았었는데 v4부터는 개선이 되어 현재도 많이 사용 중입니다.

Tree Shaking이란?

Tree Shanking이란 번들링을 하다보면 실제로 사용하지 않는 함수들이나 모듈들까지 같이 팩킹(Packing)이 되는데, 팩킹 전에 사용하지 않는 함수와 모듈들을 떨쳐내어 최종 결과물을 컴팩트하게 만드는 것입니다. 마치 나무를 흔들어서 죽은 낙엽을 떨쳐내듯 하다고 하여 Tree Shaking(나무 흔들기)라고 합니다.

Rollup

공식 홈페이지: Rollup

Webpack이 Tree Shaking이 잘 지원이 안되던 시절, Webpack의 단점들을 보완하고 Tree Shaking을 최적하하기 위하여 나온 도구입니다. Webpack 보다 점유율은 조금 떨어지지만 가볍고 빨라서 많이 사용되고 있습니다.

Parcel

공식 홈페이지: Parcel

제일 최근에 나온 도구로써 Webpack, Rollup 등 장단점을 최대한 살려 결합한 형태입니다. 글 쓰는 시점이 아닌 기술 선택 시점에서 기존 레거시 프로젝트들과 호환성이 떨어지고 레퍼런스가 부족하여 선택하지 않았지만 현재 추세나 점유율이 많이 올라가고 있는 상황입니다.

기타

기타 번들러로써 grunt나 gulp등이 존재하나 점점 사장되어가는 분위기고 gulp정도는 러닝커브가 낮아 간단한 사용법 정도는 익혀놓으면 레거시나 테스트 프로젝트에 간단히 사용할 수 있습니다.

트렌스파일러(Transpiler)

트렌스파일(Transpile)이란 언어 대 언어로 최신 문법을 레거시 문법으로 다시 써주어 구형 디바이스나 브라우저에서도 작동을 할 수 있게끔 해주는 역할을 합니다. 벤더(Vendor) 모두가 웹표준을 따라서 브라우저를 제작하면 트렌스파일을 할 필요가 없지만 우리가 익히 알고 있는 Internet Expoler 같은 브라우져계의 이단아같은 애들과 각 벤더들의 지원 상황에 따라서 어쩔 수 없이 사용하게 됩니다. 비즈니스 입장에서는 유저가 구형 브라우져를 사용하든 신형을 사용하든 상관없이 최대한 많은 고객을 지원하는 것이 유리하므로 필수적으로 사용되는 도구입니다.

공식 홈페이지: Babel

Babel은 트렌스파일러계의 1대장으로 제일 오래된 편이고 점유율도 높고 다른 번들러들과의 호환성도 높습니다. 최근 JS 프레임워크들은 Babel을 내장하거나 기본으로 지원하는 경우가 많습니다. Babel 자체는 어려운 것이 없는데 프로젝트 별과 번들러 별로 설정하는 방법이 조금씩 달라서 적용 방법과 원리를 숙지해야 합니다.

정리

번들링은 프론트앤드에는 Webpack을 사용하고 백엔드나 모듈 라이브러리에 Rollup을 사용합니다. 사실 설정에 따라서 거의 비슷한 효과를 가지게 되는데 특정 라이브러리의 호환성과 용도에 따라 조금 달리 사용합니다. 간단한 테스트나 레거시에는 Gulp도 사용합니다. 트렌스파일에는 Webpack와 Rollup에 플러그인 형태로 Babel을 사용합니다.