3. Vite의 주요 특징 - 1

빠른 개발 서버

Vite의 주요 강점 중 하나는 빠른 개발 서버입니다. 이는 Vite가 기존 번들러와는 다른 혁신적인 방식으로 작동하기 때문인데, 주로 **ES 모듈(ESM)**의 네이티브 지원과 온디맨드(On-Demand) 방식의 파일 제공을 통해 이루어집니다. 이 섹션에서는 Vite 개발 서버의 동작 원리와 Webpack 등 기존 번들러와 비교했을 때 빠른 이유를 심도 있게 다뤄보겠습니다.

1. ES 모듈(ESM)을 활용한 빠른 개발 환경

기존 번들러(Webpack, Parcel 등)는 프로젝트의 모든 파일을 번들링해서 하나의 파일 또는 청크로 묶어 제공합니다. 이는 프로젝트의 규모가 커질수록 빌드 시간이 길어지고, 특히 개발 서버를 실행할 때 초기 로드 시간이 늘어나는 문제가 있습니다.

반면, Vite는 브라우저의 네이티브 ES 모듈 지원을 기반으로 동작합니다. ES 모듈은 각각의 JavaScript 파일을 독립된 모듈로서 가져오고, 브라우저가 필요한 파일을 즉시 로드합니다. 따라서 Vite는 모든 파일을 한 번에 번들링하지 않고, 브라우저가 요청한 모듈만을 온디맨드 방식으로 제공합니다.

예시: ESM 기반의 Vite 코드

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

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

위 코드에서 createApp 함수와 App 컴포넌트는 각각 독립된 모듈로서 존재합니다. Vite는 이 모듈들을 브라우저가 요청하는 순간에 필요한 것만 즉시 제공하므로, 모든 파일을 미리 번들링할 필요가 없습니다.

2. 즉시 실행 가능한 개발 서버

Vite의 개발 서버는 파일을 미리 번들링하지 않기 때문에 즉시 실행할 수 있습니다. 기존 번들러에서 개발 서버를 실행할 때는 모든 모듈을 한 번에 컴파일하고 번들링해야 했기 때문에 시간이 많이 소요되었습니다. 반면, Vite는 이러한 사전 작업 없이 곧바로 서버를 시작할 수 있습니다.

Webpack과 Vite의 개발 서버 속도 비교

기존 번들러(Webpack)에서는 모든 파일을 번들로 묶은 후에 서버를 시작하기 때문에, 프로젝트 규모가 커질수록 서버 시작 시간이 길어집니다.

// Webpack 설정 예시
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  devServer: {
    contentBase: './dist',
    hot: true,
  },
  mode: 'development',
};

Webpack의 기본 개발 서버 설정은 위와 같습니다. 이 설정에서는 bundle.js라는 하나의 큰 파일을 만들어 제공하며, 변경된 파일이 있을 때마다 다시 컴파일 및 번들링을 수행합니다. 즉, 초기 서버 시작 시에도 번들링 과정이 필요하며, 변경 사항이 발생할 때도 느린 업데이트를 경험할 수 있습니다.

반면, Vite는 초기 번들링이 필요 없으며, 브라우저가 요청하는 파일만 그때그때 제공합니다.

// Vite 설정 예시 (vite.config.js)
export default {
  server: {
    port: 3000,
    strictPort: true,
  },
};

Vite는 기본 설정에서 별도의 번들링 작업 없이 바로 서버를 시작합니다. 이 덕분에 서버 시작 시간이 거의 즉각적이며, 파일이 변경될 때마다 전체 프로젝트를 다시 번들링하지 않고, 필요한 모듈만 빠르게 제공할 수 있습니다.

3. HMR(Hot Module Replacement) 성능

Vite의 개발 서버가 빠른 또 하나의 이유는 HMR(Hot Module Replacement) 성능 덕분입니다. HMR은 코드가 변경되었을 때 페이지를 다시 로드하지 않고 변경된 모듈만 빠르게 갱신하는 기능입니다.

기존의 번들러에서는 HMR이 번들된 파일에서 변경 사항을 찾아내고, 그 부분을 다시 컴파일해야 하므로 느릴 수 있습니다. 특히 대규모 프로젝트에서는 HMR을 적용하더라도 전체 페이지가 갱신되는 경우가 많았습니다.

하지만 Vite는 ES 모듈을 기반으로 하기 때문에, 변경된 모듈만 빠르게 교체할 수 있습니다. 또한, 변경 사항이 있는 모듈만 새로 로드하므로 즉각적인 피드백이 가능합니다. 예를 들어, 다음과 같은 Vue.js 코드에서 버튼을 클릭할 때 실시간으로 HMR이 작동합니다:

<template>
  <button @click="count++">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

이 코드를 Vite에서 실행하면, 변경된 JavaScript 코드나 Vue 컴포넌트는 페이지 전체를 새로고침하지 않고도 즉각적으로 반영됩니다. Vite의 HMR은 매우 빠르고 정확하게 작동하며, 변경 사항이 있는 부분만 다시 로드되므로 개발 경험이 크게 향상됩니다.

4. 코드 변경 시 번들링 없이 빠른 반영

기존 번들러(Webpack, Parcel 등)는 파일이 변경될 때 전체 프로젝트를 다시 번들링해야 할 수 있습니다. 이는 파일 하나만 수정했더라도 번들링 과정에서 다른 파일들과의 의존성을 다시 계산해야 하기 때문에, 번들링 시간이 길어질 수 있습니다. 특히 대규모 애플리케이션에서 이 문제는 더욱 심각해집니다.

반면 Vite는 코드가 변경될 때 변경된 모듈만 브라우저에 제공합니다. 즉, Vite는 파일이 변경되면 그 파일을 온디맨드로 다시 제공하며, 전체 애플리케이션을 다시 컴파일할 필요가 없습니다.

변경 사항 반영 예시

// src/main.js에서 count 변수가 변경될 경우
import { ref } from 'vue';
const count = ref(0);

// 버튼 클릭 시 count 값 변경
const increment = () => {
  count.value++;
};

위 코드에서 increment 함수를 수정하거나 count 값을 변경할 경우, Vite는 전체 번들을 다시 빌드하지 않고, 변경된 모듈만 브라우저에 즉시 전송합니다. 따라서 개발 속도가 획기적으로 빨라집니다.

결론

Vite의 개발 서버는 브라우저의 ES 모듈 네이티브 지원을 적극 활용하여 번들링 과정 없이 빠르게 실행되며, 파일이 변경될 때마다 전체 애플리케이션을 다시 빌드하지 않고 온디맨드로 필요한 모듈만 제공하는 방식으로 동작합니다. 또한, HMR 기능도 더욱 빠르게 작동하여 개발자에게 즉각적인 피드백을 제공합니다. 이러한 혁신적인 방식 덕분에 Vite는 기존 번들러에 비해 개발 환경에서 훨씬 빠르고 효율적인 경험을 제공합니다.