5. Vite의 주요 특징 - 3

빌드 성능 최적화

Vite의 핵심 목표 중 하나는 빌드 성능의 극대화입니다. 특히, 대규모 프로젝트에서 번들링 속도와 최종 빌드 결과물의 효율성은 매우 중요한 요소입니다. Vite는 전통적인 번들러와 달리 프리-번들링(Pre-Bundling), 트리 쉐이킹(Tree Shaking), 코드 스플리팅(Code Splitting) 등의 기술을 효율적으로 활용하여 빌드 성능을 크게 향상시킵니다. 이를 통해 개발자는 더 빠른 빌드 시간과 최적화된 배포 파일을 제공받을 수 있습니다.

1. 프리-번들링 (Pre-Bundling)

Vite의 빌드 성능 최적화의 첫 번째 단계는 프리-번들링입니다. Vite는 개발 서버가 시작될 때 node_modules에 있는 서드파티 의존성을 먼저 번들링하여 이후의 요청을 최적화합니다. 이러한 접근은 Vite가 ES 모듈을 사용하는 데 있어 필수적이며, 개발 중에 의존성을 매번 새로 분석하지 않고 한 번만 처리하므로 빌드 속도가 매우 빨라집니다.

프리-번들링 예시

vite dev

Vite는 개발 서버가 시작되면, node_modules에 있는 의존성들을 esbuild를 통해 프리-번들링합니다. 예를 들어, 프로젝트에서 react와 lodash 같은 라이브러리를 사용 중이라면, Vite는 이 의존성들을 프리-번들링하여 브라우저가 빠르게 가져갈 수 있는 형식으로 변환합니다. 이를 통해 전체 애플리케이션 번들링 시간을 크게 줄일 수 있습니다.

// esbuild로 pre-bundling된 lodash 예시
import { map } from 'lodash';

// 최적화된 pre-bundling 결과로 esbuild는 다음과 같이 간단히 변환
import { map } from '/node_modules/.vite/lodash.js?v=somehash';

이 과정 덕분에 서드파티 라이브러리들은 더 이상 매번 변환할 필요가 없으며, 캐시된 상태로 남아 성능이 크게 향상됩니다.

2. 트리 쉐이킹 (Tree Shaking)

Vite는 번들러에서 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree Shaking) 기술을 적극 활용합니다. 트리 쉐이킹은 사용자가 명시적으로 가져오지 않은 코드를 번들에서 제거함으로써 빌드 결과물이 더 작고 효율적이게 합니다. Vite는 Rollup을 사용하여 빌드 시 트리 쉐이킹을 자동으로 처리하며, 특히 ES 모듈을 사용하는 프로젝트에서 매우 효과적입니다.

트리 쉐이킹 예시

// src/utils.js
export function usedFunction() {
  console.log('This is used');
}

export function unusedFunction() {
  console.log('This is unused');
}

// src/main.js
import { usedFunction } from './utils.js';

usedFunction();

위 예시에서 unusedFunction은 전혀 사용되지 않습니다. 전통적인 번들러는 이러한 코드도 함께 번들링했지만, Vite는 Rollup의 트리 쉐이킹 기능을 활용하여 unusedFunction을 최종 빌드에서 제거합니다. 그 결과, 사용하지 않는 코드가 제거되어 최적화된 번들이 생성됩니다.

빌드 후 최적화된 결과물:

function usedFunction() {
  console.log('This is used');
}

usedFunction();

unusedFunction은 번들에 포함되지 않아 불필요한 코드가 제거됩니다.

3. 코드 스플리팅 (Code Splitting)

Vite는 **코드 스플리팅(Code Splitting)**을 통해 번들 파일을 여러 개로 분리하여, 필요한 코드만 로드하도록 최적화합니다. 대규모 애플리케이션에서는 모든 코드를 하나의 파일로 묶는 것이 비효율적일 수 있습니다. 사용자 인터페이스(UI) 상에서 특정 페이지나 컴포넌트만 필요한 경우에도 전체 번들이 로드되면 성능이 저하됩니다.

코드 스플리팅은 이런 문제를 해결하는 방식으로, 자바스크립트 모듈을 여러 개의 작은 번들로 분리하여 필요할 때만 로드합니다. Vite는 **동적 임포트(dynamic import)**를 사용하여 코드 스플리팅을 자동으로 처리합니다.

코드 스플리팅 예시

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// 동적 임포트를 사용하여 코드 스플리팅
import('./heavyComponent.js').then(module => {
  module.loadComponent();
});

위 코드에서는 heavyComponent.js는 필요할 때만 로드됩니다. 즉, 메인 애플리케이션을 로드할 때 이 모듈을 바로 로드하지 않고, 나중에 필요할 때 비동기적으로 가져오게 됩니다. Vite는 이런 방식으로 코드 스플리팅을 매우 간단하게 처리할 수 있으며, 대규모 애플리케이션에서 빌드 성능과 사용자 경험을 크게 개선합니다.

4. esbuild의 역할

Vite의 빠른 빌드 성능의 핵심 중 하나는 esbuild의 사용입니다. esbuild는 Go로 작성된 고성능 자바스크립트 번들러로, 매우 빠른 속도로 파일을 처리하고 번들링할 수 있습니다. Vite는 개발 중에는 주로 esbuild를 사용하여 의존성 프리-번들링을 처리하고, 빌드 시에는 Rollup을 사용하여 최종 번들을 생성합니다. 이 조합은 개발 중 속도와 최종 빌드의 최적화라는 두 가지 장점을 모두 제공합니다.

# Vite는 esbuild를 통해 번들링 속도를 극대화
vite build

결론

Vite는 프리-번들링, 트리 쉐이킹, 코드 스플리팅 및 esbuild와 같은 최적화 기법을 통해 빌드 성능을 극대화합니다. 이러한 최적화는 특히 대규모 프로젝트에서 빌드 속도를 크게 향상시키며, 사용자에게 더 나은 성능을 제공합니다. Vite는 빌드 성능과 개발 경험을 모두 고려하여 설계되었으며, 개발자들이 번들링 성능에 대해 신경 쓰지 않고 코드에 집중할 수 있게 해줍니다.