Vite로 빌드하기
1. 빌드도구를 Vite로 선택하게 된 배경
기존 Webpack 빌드 시스템을 사용하는 이전 프로젝트에서 빌드 시간이 위와 같이 길고, 파일 변경 후 HMR(Hot Module Replacement) 성능도 떨어지는 문제가 있었습니다. 특히 개발 중 코드 변경을 즉시 반영하려면 시간이 많이 소요되어 개발자의 생산성이 저하될 수 있었습니다. 이에 비해 Vite는 빠른 빌드 성능과 즉시 반영되는 HMR 기능을 제공하여 개발 환경을 보다 효율적으로 개선할 수 있는 가능성이 있었습니다. 이를 바탕으로 개발자가 코드 변경 시 빠르게 결과를 확인할 수 있고, 빌드 시간을 단축시킬 수 있는 장점을 고려하여 Vite를 테스트 해보려는 결정이 이루어졌습니다.
2. Vite vs Webpack
1. 빠른 속도
- Vite:
Vite는 빠른 시작과 빠른 빌드 속도를 자랑합니다. 프로젝트를 시작할 때 바로 사용할 수 있고, 수정 사항을 적용할 때도 빠르게 반영됩니다. 개발할 때 기다리는 시간이 매우 적습니다. - Webpack:
Webpack은 속도 면에서는 조금 느릴 수 있습니다. 특히 큰 프로젝트를 수정하고 결과가 반영 되기까지 시간이 오래 걸릴 수 있습니다.
2. 설정
- Vite:
Vite는 설정이 간단해서 개발자가 복잡한 설정을 몰라도 쉽게 사용할 수 있습니다. - Webpack:
Webpack은 처음 사용할 때 설정이 복잡해서 조금 어려울 수 있습니다. 기능이 많긴 하지만, 설정하기가 번거롭습니다.
3. 대상 사용
- Vite:
Vite는 주로 최신 기술(예: React, Vue 등)을 사용하여 웹사이트를 만들 때 더 빠르고 효율적입니다. - Webpack:
Webpack은 구버전 웹사이트나, 다양한 기술을 사용하는 프로젝트에서 유리합니다. 여러 기능을 세밀하게 다룰 수 있습니다.
4. 커스터마이징
- Vite:
Vite는 대부분 자동으로 설정 해주기 때문에 특별한 설정이 없어도 대부분 잘 동작합니다. 좀 더 간단한 웹사이트에 적합합니다. - Webpack:
Webpack은 모든 것을 커스터마이징 할 수 있어서, 복잡한 웹사이트에서 원하는 대로 설정을 더 많이 조정할 수 있지만, 사용하기가 조금 어렵습니다.
5. 대기 시간
- Vite:
Vite는 수정하고 나서 즉시 결과를 확인할 수 있어서 기다리는 시간이 거의 없습니다. - Webpack:
Webpack은 수정 후 결과가 반영되기까지 시간이 좀 걸릴 수 있어서, 반영 되는데까지 기다려야 할 일이 생길 수 있습니다.
결론
- Vite는 간편하고 빠르며 최신 웹 사이트에 적합한 도구이고,
- Webpack은 더 복잡한 설정이 필요하지만, 다양한 상황에 맞는 최적화를 할 수 있는 도구입니다.
쉽게 말해, Vite는 빠르고 간단, Webpack은 복잡하지만 강력한 도구라고 할 수 있습니다.
3. Vite로 React 프로젝트 시작하기
개발환경
npm: v9.8.1
node: v18.18.0
react: v16.14.0
1. Vite 프로젝트 생성
Vite를 프로젝트에 설치합니다.
npm create vite@latest
2. Project-name 입력, Framework: React 선택
3. Select a variant
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
// TypeScript를 선택
TypeScript + SWC는 대형 프로젝트일 경우 빌드 속도 향상을 기대할 수 있지만 그렇지 않을 경우 설정이 복잡해 질 수 있다고 합니다.
4. npm install로 의존성 설치
5. React 버전 다운그레이드
vite로 React 프로젝트 생성 시 React 18로 자동으로 설치됩니다. 저는 Atlassian의 Add-on Application을 개발하고 있으며, Atlaskit이 현재 React 16까지 지원하므로, 16으로 다운그레이드 해줍니다.
// 현재 설치 된 React 18버전 패키지 삭제
npm uninstall react react-dom @types/react @types/react-dom
// React 16버전(Typescript) 설치
npm install -D @types/react@16 @types/react-dom@16
6. React 16에 호환 되도록 main.tsx를 아래와 같이 수정
// main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AppProvider from '@atlaskit/app-provider';
import './locales/i18n'; // i18n
ReactDOM.render(
<React.StrictMode>
<AppProvider>
<App />
</AppProvider>
</React.StrictMode>,
document.getElementById('root'),
);
7. HTML 파일 설정
Vite는 Webpack과 달리 index.html 파일을 시작점으로 사용하는데, 이 파일은 프로젝트 루트에 설정해야 합니다.
아틀라시안 Connect 앱을 iframe에 로드하기 위한 script 또한 추가 해줍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script
src="//connect-cdn.atl-paas.net/all.js"
data-options="sizeToParent:true;margin:false"
type="text/javascript"
></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
8. Vite 설정 파일 구성
vite는 대부분 설정이 자동으로 세팅되어 cofig 파일이 필요없는 경우도 있지만, 기존 프로젝트들과의 통일성을 위해 vite server port를 3333으로 통일 해 주었습니다. 설정을 해주지 않을 경우, 기본 포트는 5173입니다.
// project root > vite.config.mts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
// alias 등 설정 가능
},
server: {
port: 3333,
},
});
9. node 서버 구동을 위한 파일들 설정
9. script 설정
기존 webpack에서는 --watch 옵션을 이용하여 파일이 변경될 때, 자동으로 빌드 되도록 설정할 수 있었습니다. Vite는 기본적으로 --watch 옵션을 제공하지 않지만, chokidar를 사용하여 파일 변경을 감지하고 빌드를 실행할 수 있습니다.
1. chokidar-cli가 없다면 먼저 설치해줍니다.
npm install -g chokidar-cli
2. package.json 수정
아래 내용을 scripts에 추가하면 파일 변경 시 자동으로 빌드되면서 서버와 클라이언트가 실행됩니다.
"scripts": {
"watch:build": "chokidar 'src/**' -c 'npm run build'",
"dev:prod": "concurrently \"npm run watch:build\" \"npm run dev:server\" \"npm run start:client\""
},
package.json 의 전체 script
"scripts": {
"start:client": "vite --mode development",
"dev:server": "AC_OPTS=force-reg env-cmd -f .env.development node --loader ts-node/esm ./bin/www.mjs",
"watch:build": "chokidar \"src/**/*\" -c \"npm run build\"",
"dev:watch": "concurrently \"npm run dev:server\" \"npm run start:client\" \"npm run watch:build\"",
"dev:build": "tsc && vite build --mode development",
"build": "tsc && vite build --mode production",
"preview": "vite preview"
},
10. 프로젝트 실행
npm run dev:watch
4. Webpack vs Vite 빌드 속도 비교
동일 프로젝트를 빌드 도구만 vite, webpack로 설정하여 각각 프로덕션 모드로 빌드시 속도 비교

위와 같이 Vite가 확연히 빠른 빌드 속도를 보여주었습니다.
빈 프로젝트의 경우 대략 5초 정도의 차이가 나지만, 프로젝트 사이즈가 커질수록 그 차이는 더 커질것으로 보입니다.
또한, 기존 프로젝트에 존재했던 느린 HMR 성능과 번들 사이즈 등의 문제 또한 webpack → vite 마이그레이션 작업을 통해 해결할 수 있을 것으로 보입니다.
참고