공부 정리

Vite로 빌드하기

논디로그 2025. 2. 4. 09:43
반응형

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: 1.87초

 

 

Webpack: 7.141초

 

 

위와 같이 Vite가 확연히 빠른 빌드 속도를 보여주었습니다.

빈 프로젝트의 경우 대략 5초 정도의 차이가 나지만, 프로젝트 사이즈가 커질수록 그 차이는 더 커질것으로 보입니다.

또한, 기존 프로젝트에 존재했던 느린 HMR 성능과 번들 사이즈 등의 문제 또한 webpack → vite 마이그레이션 작업을 통해 해결할 수 있을 것으로 보입니다.

 

 

 

 

참고

https://ko.vite.dev/

https://www.daleseo.com/vite-react/

반응형