배경

팀 내의 작은 프로젝트는 CRA 와 github.io를 통해서 정적페이지 배포하고 있는데요, CRA 로 빌드할경우 다른 번들러에 비해 많은 빌드 시간이 소요된다는 점을 깨닫게 되었습니다. CRA 를 대체할 번들러를 찾아보다 Vite를 발견했고, Vite로 번들러 교체후 빌드시간을 단축 할 수 있었습니다. 기존 빌드 타임 Vite로 번들러 변경 후 빌드 타임

Vite

Vite의 가장 큰 특징이라고 한다면 ES6에서 도입된 ESM(ECMA Script Modules) 를 사용한다는 점인데, import/export를 통하여 모듈을 동적으로 로드할 수 있는 모듈 시스템입니다.

Webpack과 같이 ESM이 나오기 전의 방식은 모든 소스코드가 빌드되어 한번에 번들링된 형태로 제공이 되었다면, ESM 기반의 Vite에서는 그럴 필요가 없습니다. 어떤 모듈이 수정되었다면 vite는 그저 수정된 모듈과 관련된 부분만을 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐입니다. 따라서 앱사이즈가 커져도 HMR을 포함한 갱신 시간에는 영향을 끼치지 않습니다.

마이그레이션 방법

1. Vite 설치 및 CRA 제거

# npm
npm install -D vite @vitejs/plugin-react
npm uninstall react-scripts

# Yarn
yarn add -D vite @vitejs/plugin-react
yarn remove react-scripts

2. Vite Config 파일 생성

vite project 시작하면 생성되는 기본 세팅 파일

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
});

필요에 따라 plugin을 설치하여 설정 할 수 있습니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    envPrefix: 'REACT_APP_',
    plugins: [
        react(),
        svgr({
            exportAsDefault: true,
        }),
        envCompatible(),
    ],
    build: {
        outDir: './docs',
    },
});

• envPrefix, envCompatible()
  CRA에서 환경변수를 설정하려면 환경변수 앞에 REACT_APP을 붙여야 합니다., VITE는 기본적으로 환경변수앞에 VITE를 붙여야 인식할 수 있습니다. 기존에 썼던 환경변수를 사용하기 위해서는 vite-plugin-env-compatible 플러그인을 설치 및 설정을 해줘야합니다.

  또한, Vite에서는 환경변수 불러오는 방법에도 차이점이 있습니다.

  // CRA
  process.env.REACT_APP_API_KEY
  // Vite 
  import.meta.env.REACT_APP_API_KEY //env Prefix 설정하면 REACT_APP을 붙일 수 있습니다.

• svgr
  기존엔 SVG를 그냥 import 해와서 쓰고 있었는데, vite에서는 에러가 발생하여 svgr 플러그인으로 해결 하였습니다. 특이한 점은 svg 옆에 ?react를 붙여주어야 에러가 나지 않습니다.

  // CRA 
  import { ReactComponent as ChartActive } from '../assets/icons/chart-active.svg';
  import { ReactComponent as Chart } from '../assets/icons/chart.svg';
  import { ReactComponent as ChevronDown } from '../assets/icons/chevron-down.svg';
  
  // vite, 플러그인 설치후 
  import ChartActive from '../assets/icons/chart-active.svg?react';
  import Chart from '../assets/icons/chart.svg?react';
  import ChevronDown from '../assets/icons/chevron-down.svg?react';

3. index.html 이동 및 수정

기존 public 폴더에 있던 index.html을 root로 옮겨줍니다. vite는 추가 번들링 없이 index.html 엔트리포인트가 되게 끔 의도적으로 변경되었기 때문입니다 공식문서

index.html에 포함된 %PUBLIC_URL% 참조를 제거하고, 진입점을 추가해야합니다.

CRA
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

VITE
<link rel="manifest" href="manifest.json" />
<script type="module" src="/src/index.tsx"></script>

4. tsconfig 수정

아래와 같이 types를 추가해줍니다.

 "types": ["vite/client", "vite-plugin-svgr/client"],

5. vite-env.d.ts 생성

src 폴더에 있던 react-app-env.d.ts를 삭제하고 vite-env.d.ts 파일을 생성합니다.

/// <reference types="vite/client" />

6. package.json 수정

react-script로 되어 있던 커맨드를 vite로 수정합니다.

- "start": "env-cmd -f env/.local.env react-scripts start",
- "build": "BUILD_PATH='./docs' env-cmd -f env/.prod.env react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"

+ "start": "env-cmd -f env/.local.env vite",
+ "build": "BUILD_PATH='./docs' env-cmd -f env/.prod.env vite build",
+ "test": "vite test",
+ "eject": "vite eject"

마무리

CRA는 더이상 React 팀의 권장 사항이 아니라고 합니다. Next나 Remix, Gatsby 와 같은 프레임워크를 이용하는 것이 보편화되어있지만, 단순히 작은 프로젝트에 프레임워크를 도입하는 것보다 가볍고 빠른 Vite를 도입하는 것이 좋은 선택일 수 있습니다. 이 글을 보신 분들도 마이그레이션을 성공적으로 마치고 좀 더 나은 React 개발 환경을 경험 할 수 있으면 좋겠습니다.

읽어주셔서 감사합니다.