Vite의 핵심 마법: esbuild와 네이티브 ESM이 프론트엔드 개발을 재창조하는 방법

소개

프론트엔드 개발 환경은 끊임없이 진화하고 있으며, 개발자들은 더 빠르고 효율적인 워크플로우를 끊임없이 추구하고 있습니다. 전통적인 번들러는 강력하지만, 특히 대규모 프로젝트에서는 느린 시작 시간과 더딘 핫 모듈 교체(HMR)로 인해 종종 어려움을 겪습니다. 이러한 오버헤드는 생산성과 개발자 경험을 크게 저해할 수 있습니다. 차세대 프론트엔드 도구인 Vite는 이러한 패러다임을 혁신할 것을 약속합니다. 최신 브라우저 기능과 고도로 최적화된 네이티브 도구를 활용하여 Vite는 즉각적인 서버 시작과 번개처럼 빠른 HMR을 특징으로 하는 비교할 수 없는 개발 경험을 제공합니다. 이 글에서는 Vite 성공의 핵심 원리를 탐구하며, 특히 의존성 사전 번들링을 위한 esbuild와 효율적인 핫 모듈 업데이트를 위한 네이티브 ESM에 중점을 둡니다.

Vite의 혁신 이해하기

Vite의 메커니즘을 자세히 살펴보기 전에, 그 아키텍처를 뒷받침하는 몇 가지 핵심 개념에 대한 공통된 이해를 확립해 봅시다.

주요 용어

• ES 모듈(ESM): JavaScript 모듈의 공식 표준입니다. ESM은 모듈식 코드 구성을 허용하여 개발 중에 번들러 없이도 브라우저에서 import 및 export 문을 사용할 수 있게 합니다. 이것은 Vite의 서버 중심 접근 방식의 중요한 기반입니다.
• CommonJS(CJS): 주로 Node.js에서 사용되는 모듈 형식입니다. 많은 npm 패키지가 여전히 CJS 형식으로 게시됩니다.
• 번들링: 여러 JavaScript 파일과 해당 종속성을 단일 또는 몇 개의 출력 파일로 결합하는 프로세스입니다. 이것은 일반적으로 브라우저에 최적화된 전달을 위해 수행됩니다.
• 사전 번들링: Vite가 시작 중에 특정 종속성(특히 CommonJS 모듈 또는 내부 종속성이 많은 모듈)을 사전에 번들링하는 최적화 단계입니다. 이 사전 처리는 비 ESM 형식을 ESM으로 변환하고 종속성 그래프를 평탄화하는 데 도움이 됩니다.
• 핫 모듈 교체(HMR): 애플리케이션 상태를 유지하면서 실행 중인 애플리케이션의 모듈을 전체 페이지 새로 고침 없이 라이브로 업데이트할 수 있게 해주는 기능입니다.

전통적인 번들러의 문제점

Webpack 및 Rollup과 같은 전통적인 번들러는 애플리케이션 전체 그래프를 미리 빌드합니다. 여기에는 모든 import 및 require 문을 탐색하고, JavaScript를 변환하고, 다양한 최적화를 수행하는 작업이 포함됩니다. 대규모 애플리케이션의 경우 이 "번들 먼저" 접근 방식은 다음을 초래합니다.

1. 느린 서버 시작: 전체 애플리케이션이 번들링될 때까지 개발 서버를 완전히 준비할 수 없으며, 이는 몇 초 또는 몇 분이 걸릴 수 있습니다.
2. 느린 HMR: 작은 변경 사항이라도 번들러가 애플리케이션의 상당 부분을 다시 번들링해야 할 수 있으므로 HMR이 적용되기까지 눈에 띄는 지연이 발생합니다.

Vite의 해결책: 사전 번들링을 위한 esbuild 활용

Vite는 "먼저 제공하고, 필요에 따라 번들링" 전략을 채택하여 느린 서버 시작 문제를 해결합니다. Go로 작성된 매우 빠른 JavaScript 번들러 및 축소 도구인 esbuild를 활용합니다.

esbuild를 사용하는 이유?

esbuild는 JavaScript 기반 번들러보다 훨씬 빠릅니다. 속도는 Go로 작성되었고, 병렬 처리를 많이 사용하며, 효율성에 중점을 둔 설계에서 비롯됩니다. Vite는 이 속도를 두 가지 주요 목적으로 활용합니다.

1. 의존성 사전 번들링:

   • 많은 npm 패키지가 CommonJS로 게시되거나 내부 모듈이 많습니다.
   • 이러한 패키지를 네이티브 ESM으로 직접 제공하면 비효율적일 수 있으며, 수많은 HTTP 요청(각 모듈마다 하나씩)이 발생하거나 브라우저에서 CJS 스타일 가져오기 문제가 발생할 수 있습니다.
   • Vite는 esbuild를 사용하여 node_modules에서 종속성을 검색합니다. 그런 다음 이러한 타사 종속성을 일반 JavaScript로 변환된 단일 ESM 파일(또는 몇 개의 파일)로 번들링합니다.
   • 이 프로세스는 CommonJS 모듈을 ESM으로 변환하여 브라우저 호환성을 보장하고 요청 수를 줄입니다. 또한 복잡한 종속성 그래프를 더 간단한 그래프로 평탄화합니다.
   • 이 사전 번들링은 종속성이 변경되거나 첫 시작 시에만 발생합니다. 이후 시작은 사전 번들링된 캐시를 사용하므로 즉시 완료됩니다.

   예시: CommonJS 라이브러리 lodash를 가져오는 main.js를 고려해 보세요.

   // main.js
   import _ from 'lodash';
   console.log(_.get({a: 1}, 'a'));

   사전 번들링이 없으면 lodash는 브라우저가 기본적으로 이해하지 못하는 CJS로 제공될 것입니다. Vite의 esbuild 사전 번들링 단계는 lodash(및 다른 node_modules 종속성)를 ESM 형식으로 변환합니다. main.js가 lodash를 요청하면 Vite는 이 요청을 가로채 node_modules/.vite/deps/lodash.js에서 사전 번들링된 ESM 버전을 제공합니다.

   브라우저의 네트워크 탭에는 lodash가 개별 CJS 모듈로 제공되는 경우 잠재적으로 수백 개의 작은 파일에 대한 요청 대신 lodash.js에 대한 단일 요청이 표시됩니다.

Vite의 해결책: 핫 모듈 교체를 위한 네이티브 ESM

Vite는 개발 중에 명시적인 번들링을 완전히 건너뛰어 매우 빠른 HMR을 달성합니다. 대신 소스 파일을 네이티브 ESM으로 브라우저에 직접 제공합니다.

작동 방식:

1. 브라우저가 소스 파일을 요청: 브라우저가 main.js를 요청하면 Vite는 이 요청을 가로챕니다. main.js가 ESM 파일이므로 Vite는 이를 직접 제공합니다.

2. import 재작성: Vite는 기본 모듈 지정자(예: import 'lodash')를 브라우저가 해결할 수 있는 유효한 경로(예: import '/node_modules/.vite/deps/lodash.js')로 재작성합니다.

3. WebSocket을 통한 HMR: Vite는 모듈에 클라이언트 측 HMR 코드를 주입합니다. 소스 파일에서 변경 사항이 감지되면 Vite의 개발 서버(Koa 기반)는 다음을 수행합니다.

   • 변경된 모듈을 식별합니다.
   • WebSocket을 통해 클라이언트에 HMR 업데이트 메시지를 보냅니다.
   • 클라이언트 측 HMR 런타임은 Vite 개발 서버에서 업데이트된 모듈을 요청합니다.
   • 중요하게도 Vite는 전체 애플리케이션을 다시 번들링하는 것이 아니라 변경된 모듈과 그 즉각적인 종속성만 제공합니다.
   • 네이티브 ESM의 세분화된 특성은 정확한 업데이트를 허용합니다. 무효화된 모듈과 그 소비자를 다시 평가해야 할 뿐, 전체 애플리케이션 그래프는 아닙니다.

   예시:

   Button.vue를 가져오는 App.vue가 있다고 가정해 봅시다.

   // App.vue
   <script setup>
   import Button from './Button.vue';
   </script>
   <template>
     <Button />
   </template>

   // Button.vue
   <script setup>
   import { ref } from 'vue';
   const count = ref(0);
   </script>
   <template>
     <button @click="count++">Count: {{ count }}</button>
   </template>

   Button.vue를 수정할 때:

   • Vite는 Button.vue의 변경 사항을 감지합니다.
   • Button.vue가 업데이트되었음을 나타내는 HMR 메시지를 브라우저로 보냅니다.
   • 브라우저의 HMR 런타임은 Button.vue의 새 버전을 import합니다.
   • Button.vue는 네이티브 ESM 모듈이므로 브라우저는 이 새 버전을 독립적으로 로드할 수 있습니다. Vue의 HMR 통합은 App.vue에서 count 상태를 유지하면서 이전 컴포넌트 인스턴스를 새 인스턴스로 우아하게 교체합니다.
   • Button.vue만 다시 평가되어 거의 즉각적인 피드백을 제공합니다.

이러한 esbuild의 빠른 초기 종속성 최적화와 온디맨드 제공 및 세분화된 HMR을 위한 네이티브 ESM의 결합은 Vite에 탁월한 성능을 제공하는 요소입니다.

결론

Vite는 esbuild의 비교할 수 없는 번들링 속도와 ES 모듈의 기본 전송 및 핫 모듈 교체를 위한 네이티브 파워를 스마트하게 결합하여 프론트엔드 개발 경험을 크게 향상시킵니다. 이 아키텍처는 전통적인 번들러와 관련된 느린 시작 및 HMR이라는 일반적인 문제점을 제거하여 개발자에게 즉각적인 피드백과 매우 생산적인 워크플로우를 제공합니다. Vite는 단순한 도구가 아니라 웹 개발의 더 빠르고 효율적인 미래를 향한 패러다임 전환입니다.