esbuild는 새롭게 떠오르는 웹 기술입니다. esbuild의 개발자이자 Figma의 공동창설자인 Evan W는, esbuild는 웹을 위한 연결고리(linker)라고 표현을 했습니다. 또한 esbuild를 실제로 사용해본 개발자들은 esbuild가 곧 webpack의 대체재가 될 것이라고 이야기하고 있습니다. esbuild의 등장이 웹 생태계에 어떤 변화를 가져올 지, esbuild가 가진 강점이 무엇인지 차근차근 알아보겠습니다.
Javascript의 문제점과 ES Modules의 등장
먼저, 웹의 가장 기본언어인 Javascript에 대해 이야기 해보자면, Javascript를 웹에 배포하기 위해서는 특정 툴이 항상 필요합니다. 런타임 환경에서 일반 텍스트로 평가되는 Javascript는 일반적으로 <script> 태그를 통해 plaintext Javascript를 동작시킵니다. javascript 파일이 1개인 경우는 무리없이 동작하겠지만, 만약 파일이 여러개라면 다소 까다로운 상황이 발생합니다.
위와 같은 Javascript 문제는, ES Modules의 등장으로 해결되는 듯 보였습니다. ES Modules은 간단히 Javascript 모듈을 뜻하며 재사용가능한 Javascript 단위라고 생각할 수 있습니다. 하지만 이 편리한 ES Module에도 단점이 존재했고, 런타임환경에서 JavaScript dependencies를 다루는 점이 production 환경에 좋지않다는 의견이었습니다.
linker (javascript moduler)
그리고 이런 단점을 보완하기 위해, 새롭게 생겨난 개념이 linker 입니다. 'linker'는 말그대로 필요한 코드를 서로 연결해주는 툴이며, webpack , Rollup , Parcel 또는 esbuild 와 같은 도구를 사용해 build-time에서 dependencies를 다룰 수 있습니다. 그렇다면 이 중에서 esbuild가 특별한 이유는 무엇일까요?
esbuild란?
esbuild는 JavaScript 번들을 빠르게 읽을 수 있는 CLI, NPM package 입니다. Go와 Javascript / TypeScript로 개발되었으며 2020년 초에 처음 출시되었습니다. esbuild는 잘 짜여진 documentation과 쉬운 CLI 환경을 갖추고 있으며 결과적으로 매우 빠릅니다.
그렇다면 esbuild를 무엇에 사용할 수 있을까요?
먼저 자바 스크립트(js, jsx, ts, 및 tsx)와 CSS 등을 배포가능한 형태로 링크할 수 있습니다. 그리고 번들링 또는 코드 분할, 플러그인 등을 사용가능하고 , esbuild의 핵심 기능이라고 할 수 있는 부분컴파일 , 감시 모드 및 서비스 모드 등 의 기능을 사용가능합니다.
esbuild의 기능
🔥 Bundling & Code-spliting
JavaScript 및 CSS 소스를 번들링하거나 코드 분할 할 수 있습니다.
- 번들링은 단일 app.js대상 을 배포하려는 경우에 사용됩니다 .
- 코드 분할은 메인 파일인 app.js를 Sidebar.js, Header.js등의 파일로 세분화하는 방법이며 ES 모듈을 지원합니다.
🔥 Plugins
Plugin API를 사용하면 빌드 과정에서 다양한 부분에 코드를 주입할 수 있습니다. 플러그인은 Markdown을 HTML, JSX로 변환하거나, Sass를 CSS로 변환하려는 경우 매우 유용하게 쓰입니다. 다른 API와는 달리 command line에서는 사용할 수 없고 JavaScript 또는 Go 코드를 별도로 작성해야 합니다.
🔥 부분 컴파일 (Incremental Compilation)
코드가 변경 될 때, 같은 파일을 반복적으로 컴파일해야하는 경우, 부분 컴파일을 사용하면 성능 저하없이 효율적으로 빌드를 수행 할 수 있습니다. 이는 esbuild가 변경된 소스에 대해서만 작업을 수행하기 때문입니다.
🔥 Watch mode
Watch mode는 esbuild가 소스 코드의 변경 사항을 바로 인식해서 결과에 반영할 수 있음을 뜻합니다. nodemon 또는 chokidar 와 같은 라이브러리의 기능을 esbuild 자체에서 가지고 있기때문에 부가적인 툴을 다운받을 필요가 없으며 watch mode를 사용하지 않는 경우 기능을 끌 수도 있습니다. 또한 커스텀된 watch mode도 만들 수 있습니다.
🔥 Serve mode
Serve 모드는 esbuild를 웹 서버로 사용하고 들어오는 요청에 대한 자체 서비스 핸들러를 구현하여 이벤트를 관찰하고 기록하는 등의 작업을 수행 할 수 있음을 의미합니다. esbuild는 실제로 디스크가 아닌 메모리에서 번들 또는 코드 분할 대상을 제공합니다. 이것은 요청 당 필요한 총 작업량을 줄이므로 esbuild는 믿을 수 없을 정도로 성능이 뛰어난 웹 서버가됩니다.
