2. Vite란 무엇인가? - 2

Webpack 등 기존 번들러와 Vite의 차이점

기존 번들러와 Vite의 가장 큰 차이점은 번들링의 방식과 개발 서버의 성능입니다. Webpack, Parcel과 같은 전통적인 번들러는 주로 모든 파일을 한 번에 묶어 번들링하고, 이를 클라이언트에게 제공하는 방식으로 동작합니다. 반면, Vite는 브라우저의 **ES 모듈(ESM)**을 적극 활용하여 필요한 파일만 그때그때 제공하는 방식을 채택하고 있습니다. 이 차이점은 특히 개발 환경에서의 서버 속도와 빌드 성능에서 큰 격차를 보입니다.

1. 번들링 방식의 차이

Webpack: 전체 번들링 방식

Webpack은 모든 파일을 하나의 번들로 묶는 방식을 기본적으로 사용합니다. 즉, 프로젝트에 포함된 모든 파일을 **트리쉐이킹(tree-shaking)**과 같은 최적화 과정을 거쳐 하나의 큰 파일(또는 여러 청크)로 변환하고, 이 파일을 서버로 제공하는 것입니다. 이러한 방식은 생산성에 있어서는 강력한 이점이 있지만, 개발 속도에 있어서는 한계가 있습니다.

예를 들어, Webpack에서 기본적인 설정을 통해 JavaScript 모듈을 하나로 번들링하는 예는 다음과 같습니다.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  mode: 'development',
};

이 설정을 통해 모든 파일을 bundle.js로 묶어 빌드하게 됩니다. 프로젝트의 크기가 커지면 커질수록, 이 빌드 과정에서 시간이 많이 소요되며, 파일이 변동될 때마다 재번들링을 수행해야 합니다. 이로 인해 빌드 시간이 점점 늘어나고, 개발 속도가 느려집니다.

Vite: 모듈 단위로 필요한 파일만 제공

반면, Vite는 개발 서버에서는 번들링을 하지 않습니다. 브라우저가 직접 ES 모듈을 가져다 사용할 수 있도록, 필요한 모듈만 즉시 제공하는 방식으로 동작합니다. 이를 통해 서버 시작 시간이 거의 제로에 가까워지고, 파일 변경 시 전체 애플리케이션을 다시 빌드하지 않기 때문에 빠른 개발 경험을 제공합니다.

ESM 방식은 각 JavaScript 파일이 독립적인 모듈로 동작하도록 하며, 브라우저가 직접 이 모듈들을 불러옵니다. Vite는 이 과정을 다음과 같이 처리합니다:

// 개발 서버에서는 ESM을 사용
import { createApp } from 'vue';
import App from './App.vue';

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

위 코드를 Vite 개발 서버에서 실행할 경우, 각 모듈이 네트워크 요청을 통해 브라우저에 개별적으로 로드됩니다. 이 방식 덕분에 번들 과정 없이 즉각적인 반응성을 제공합니다.

2. 개발 서버의 성능 차이

Webpack의 느린 개발 서버

Webpack을 사용하면 개발 환경에서 파일을 변경할 때마다 전체 번들을 다시 컴파일해야 합니다. 비록 HMR(Hot Module Replacement)을 사용하여 코드 변경 사항을 빠르게 반영할 수 있긴 하지만, 프로젝트의 규모가 커질수록 초기 서버 시작 속도와 빌드 속도가 점점 느려집니다.

예를 들어, 다음은 Webpack에서 HMR을 설정하는 기본적인 예입니다.

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

이 설정으로 Webpack은 변경된 모듈을 빠르게 반영할 수 있지만, 여전히 처음에 서버를 시작할 때 모든 모듈을 번들링해야 하므로 초기 서버 시작 속도가 느려지는 문제는 해결되지 않습니다. 특히 대규모 프로젝트에서는 수십 초에서 몇 분까지 소요될 수 있습니다.

Vite의 빠른 서버 시작

Vite는 ESM 기반의 개발 서버를 사용하기 때문에 번들링 없이 서버를 시작할 수 있습니다. 즉, 브라우저가 요청하는 모듈을 그때그때 전달하므로, Vite 개발 서버는 거의 즉각적인 시작이 가능합니다. Vite는 **온디맨드(On-Demand)**로 모듈을 제공하기 때문에, 처음 서버가 실행될 때 시간이 거의 소요되지 않습니다.

3. HMR(Hot Module Replacement) 성능 차이

Webpack의 HMR

Webpack은 **HMR(핫 모듈 교체)**을 통해, 코드가 변경되었을 때 전체 애플리케이션을 다시 로드하지 않고 변경된 부분만 반영할 수 있는 기능을 제공합니다. 그러나 Webpack은 번들링을 통해 작동하므로, 여전히 프로젝트가 커질수록 HMR 적용 속도도 느려질 수 있습니다.

// index.js
if (module.hot) {
  module.hot.accept('./module.js', function() {
    console.log('module.js 파일이 변경되었습니다.');
  });
}

이 코드를 통해 Webpack의 HMR을 구현할 수 있지만, 번들링 과정을 통해 HMR이 적용되기 때문에, 프로젝트가 크면 크수록 성능 저하가 발생할 수 있습니다.

Vite의 빠른 HMR

반면 Vite는 네이티브 ESM을 사용하여 HMR을 처리하기 때문에, 번들링 없이 각 모듈을 직접 교체할 수 있습니다. 이로 인해 HMR의 성능이 훨씬 더 빠르고 모듈 단위로 즉각적인 업데이트가 가능합니다. 코드 변경 후 페이지를 새로 고칠 필요 없이 즉각적인 피드백을 받을 수 있습니다.

예를 들어, Vite에서는 다음과 같은 방식으로 HMR이 적용됩니다:

// 개발 환경에서 HMR이 즉시 적용됨
<template>
  <button @click="count++">{{ count }}</button>
</template>

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

위 코드는 Vite의 개발 서버에서 HMR을 통해 버튼 클릭 수가 실시간으로 반영되며, 전체 페이지를 새로 고칠 필요가 없습니다. 이는 Webpack보다 훨씬 빠른 피드백 루프를 제공합니다.

4. 번들링과 코드 스플리팅의 차이

Webpack의 번들링

Webpack은 최적화된 프로덕션 빌드를 위해 코드 스플리팅과 트리쉐이킹을 적용하여, 필요한 코드만 포함된 번들을 생성합니다. 하지만 이 과정은 개발 중에는 적용되지 않으며, 빌드 시간이 상당히 소요될 수 있습니다.

Vite의 Rollup 기반 번들링

Vite는 Rollup을 기반으로 프로덕션 빌드를 수행합니다. Rollup은 Webpack보다 간결하고 효율적인 번들링을 제공하며, 코드 스플리팅을 기본적으로 지원합니다. Vite는 개발 환경에서는 빠른 반응성을, 프로덕션 환경에서는 최적화된 번들을 생성하는 하이브리드 방식을 제공합니다.

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
      },
    },
  },
};

이 설정은 Vite가 프로덕션 빌드에서 코드 스플리팅과 최적화된 파일 이름 생성을 제공하는 예입니다. Vite의 프로덕션 빌드는 기존 번들러에 비해 빠르고, 빌드 결과물이 더 작습니다.

결론

Webpack과 같은 기존 번들러는 프로젝트 규모에 따라 빌드 속도와 서버 시작 시간이 크게 늘어나는 반면, Vite는 브라우저의 ESM 네이티브 기능을 활용해 빠르고 효율적인 개발 환경을 제공합니다. 특히 개발 중에는 번들링을 생략하고 모듈 단위로 즉시 제공하는 Vite의 방식이 빠른 피드백 루프를 제공하며, 프로덕션 빌드 시에는 Rollup을 기반으로 한 최적화된 번들을 제공합니다.

Vite는 개발 경험을 크게 향상시키며, 특히 SPA와 같은 프로젝트에서 매우 강력한 성능을 발휘합니다.