CRA에서 Vite로 마이그레이션하기

eunji·2023년 7월 19일

💻 리액트 이모저모 💻

목록 보기

6/7

계기

회사에서 웹뷰 작업을 하고 있는 나는 모바일 환경에서 내가 원했던것과 다르게 구현되는 현상을 자주 겪는다. 해결이 되었는지 확인을 하기 위해서는 개발서버에 배포해서 모바일 환경에서 확인하는건데 한번 빌드할때마다 몇십초를 기다려야하니 답답함이 느껴졌다. 그래서 지금 환경을 개선할 수 있는 방법이 없을까 찾아보다가 Vite존재를 알게 되었고 도입하기 전 기술공부를 하였다.

Vite가 뭐야?

Vite는 프론트엔드 툴로 싱글스레드 환경에서 돌아가는 Webpack을 사용하지 않고 개발서버와 프로덕션 빌드를 위해 각각 esbuild와 Rollup을 사용하여 속도를 유의미하게 개선시켜준다.

개발서버: Webpack의 번들 기반 개발 서버는 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후 서버가 준비된다. 하지만 Vite는 Webpack보다 무려 100배 빠르다는 esbuild번들러를 사용하여 즉각적으로 서버 구동을 한다.
프로덕션 빌드: 프로덕션 빌드에는 esbuild를 사용하지 않고 Rollup을 사용하고 있는데 각 모듈을 개별적인 범위의 함수로 맵핑하여 결합하는 Webpack 방식과 달리 하나의 파일에 모든 종속 모듈을 전역범위로 선언해 결합하여 중복을 제거 하여 빠른 빌드 결과를 낸다.
현재는 제일 효율적이라고 생각하여 Rollup을 사용하지만 추후에는 esbuild를 사용할 수 있다고 한다. 자세한건 여기서 확인!

그리고 마이그레이션을 이미 진행한 다른 개발자분들의 글을 많이 찾아보았는데 과정이 복잡하지 않고 만족도도 높아서 바로 마이그레이션을 진행하였다.

마이그레이션 시작!

Vite 패키지 설치

npm install -D vite @vitejs/plugin-react // npm 버전
yarn add -D vite @vitejs/plugin-react // yarn 버전

@vitejs/plugin-react : React project를 위한 Vite plugin
- Fash refresh 가능
- 커스텀한 Babel plugins과 presets 사용가능
- 작은 사이즈

스크립트 교체

"scripts" : {
  "start" : "vite"
  "build" : "vite build"
}

index.html 파일 위치 및 내용 수정

기존 public폴더 안에 있는 index.html을 root 위치로 수정 필요
%Public_URL% 로 작성된 것을 실제 경로로 변경 필요
진입점 추가

<body>
    <div id="root"></div>
    <script type=”module” src=”/src/index.tsx”></script>
</body>

추가 플러그인 설치

npm install -D vite-tsconfig-paths vite-plugin-env-compatible @sentry/vite-plugin

vite.config.ts 파일 추가

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import envCompatible from "vite-plugin-env-compatible";
import { sentryVitePlugin } from "@sentry/vite-plugin";


export default defineConfig({
  envPrefix: "REACT_APP_", // 환경변수 prefix 변경 
  plugins: [
    react(),
    viteTsconfigPaths(),
    envCompatible(),
    sentryVitePlugin({
      authToken: "" 
      project: "project name",
      sourcemaps: {
        ignore: ["node_modules"],
      },
    }),
  ],
  server: {
    open: true, // 서버 시작 시 브라우저 앱 자동으로 열기
    port: 8000, // 기본 포트
  },
  build: {
    sourcemap: true
  },
});

viteTsconfigPaths : vite환경에서 절대경로 설정 가능하게 하는 플러그인
envCompatible : Vite의 환경변수 시작은 VITE_인데 이 플러그인을 설치하면 prefix를 따로 설정해줄 수 있다. (envPrefix 참고)
sentryVitePlugin : 기존 Webpack config파일에 설정해 놓은 Sentry를 위한 플러그인. Sentry를 사용하지 않는다면 필요없다.

환경변수 불러오는 방식 변경

envCompatible 플러그인으로 인해 기존의 REACTAPP은 변경하지 않아도 되지만 불러오는 방식은 process.env 에서 import.meta.env로 변경해주어야 한다.

/src/react-app-env.d.ts → /src/vite-env.d.ts 파일명 변경 및 내용 수정

from
/// <reference types="react-scripts" />

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

tsconfig.json 변경

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/",
    "baseUrl": "src",
    "types":["vite/client"]
  },
  "include": ["src"]
}