새롭게 등장한 웹 빌드툴에 대해 정리해보자 : esbuild, Vite

개발자 경험 개선이라는 목표를 가지고 출시된 웹프론트엔드 빌드 툴 esbuild, Vite에 대해 정리해본다.

 

개발자가 로컬에서 개발서버를 실행할 때,

기존에 사용하는 Webpack, Rollup, Parcel 같은 툴들은 개발자가 작성한 소스코드와 node_modules 폴더의 전체 코드 베이스를 번들로 묶고, 빌드 프로세스(Babel, Typescript 트랜스파일링 또는 PostCSS)를 통해 번들된 코드를 브라우저에 제공한다. 수정할 때마다 매번 새롭게 빌드 되야했다. 이 모든 작업은 캐싱과 최적화를 하더라도 개발서버를 느리게 만들 수 있다.

 

번들러? 

어플리케이션에서 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할을 한다. 자바스크립트에도 모듈 개념이 등장하게 된 것이 배경이라 할 수 있다.

 

우리가 흔히 사용하는 webpack이라는 번들러에 많은 플러그인들을 함께 사용하고 있기에 빌드/번들러, 기타 빌드 툴들의 바운더리가 모호할 수 있다.

'웹팹에서 빌드한다' 라는 말은 사실 여러가지를 내포한다 : 어플리케이션의 타입스크립트나 자바스크립트 코드를 트랜스파일링하고, 의존성 패키지들과 함께 번들링하고, 브라우저에서 로드하기 최적화된 형태로 만든다. (+ 개발서버를 구동한다.)

결과물로 웹 어플리케이션을 구성하는 번들이 나온다. (html, js, css 파일)

프로젝트는 어떤 형태로 구성되있는가, 이 결과물을 어떤 형태로 만들 것인가, 브라우저에서 로드를 어떤 방식으로 하게 할 것인가 등의 옵션을 모두 번들러에서 설정한다고 보면 된다.

 

webpack외에 rollup, parcel 등의 번들러들이 있다.

번들러에 대해 더 자세히 알고 싶다면 이 글을 참고 : https://blog.leehov.in/24

 

1. esbuild

- 노드기반 번들러보다 10~100배 빠른 빌드를 제공한다.

- JIT 컴파일 방식인 자바스크립트로 작성된 기존 번들러와 달리, 네이티브 코드 방식으로 동작한다.

- Go언어를 기반으로한 번들링 수행으로, node(javascript)기반의 번들링보다 속도가 빠르다.

    - parsing, linking, code 생성 단계 중 parsing과 code 생성단계에서 병렬처리의 이점이 크게 작용한다.

- esbuild에서 사용하는 커스텀한 Typescript 파서는 공식 Typescript 컴파일러 파서보다 성능을 우선순위에 두고있다.

 

- webpack에서 esbuild loader 형태로 사용한다면 transpile, minify 절차만 esbuild에 위임하고 있다고 보면 된다. 이것만으로도 드라마틱한 빌드 시간 절약을 확인할 수 있다.

- esbuild는 아직 webpack이나 vite 같이 여러 기능을 담고 있는 통합 빌드툴을 대체하기엔 아직 제한적이다. 그래서 webpack과 esbuild loader 구성으로 사용하는 사례가 많은 것 같다. 혹은 아래 Vite같은 esbuild기반의 빌드 툴을 사용하거나!

 

 

2. Vite

- Vue 창시자인 Evan You아저씨가 Snowpack에 단점을 개선해 개발한 툴

- 개발서버와 Rollup을 이용한 최적화된 빌드, 커맨드, 기존 webpack 같은 번들도구에서 제공하던 기능을 모두 지원

- Vite는 프로젝트의 모든 의존성을 esbuild를 이용해 단일 기본 자바스크립트 모듈로 사전 번들링을 진행하고, 캐시된 HTTP 헤더와 함께 제공해, 첫 페이지 로드 후 가져온 의존성을 컴파일해 제공/요청하는데 시간이 걸리지 않는다.

- vue이외에도 react, svelte 등의 템플릿도 모두 지원하고, hot module replacement 플러그인을 제공

  *hot module replacement란? : 수정한 코드 부분만 재빌드해서 개발서버에 업데이트되는 기능

 

빌드 툴에 대해 변천사를 전체적으로 잘 정리한 글 ! : https://yozm.wishket.com/magazine/detail/1620/