-
Vite로 번들러 마이그레이션 및 에러 해결Frontend 2023. 5. 24. 02:08728x90
원티드 프리온보딩 4월 챌린지를 수강할 때 vite를 얕게 배웠었고, 빌드 속도가 매우 빨라진다는 점을 듣고 현재 진행하고 있는 프로젝트에도 적용하면 좋을 것 같아 Vite를 사용해보고자 했습니다.
이미 많이 진행된 프로젝트에 번들러를 webpack에서 vite로 바꾸는 과정을 진행했습니다.
Vite
Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구입니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다.
Vite가 빠른 이유
- 개발 서버: Webpack의 번들 기반 개발 서버는 소스 코드와 모든 종속 관계의 모듈을 번들링 후 서버가 준비됩니다. 반면에 Vite는 극단적으로 빠른 Esbuild로 미리 번들링 한 모듈을 필요시 동적으로 가져오므로 명령 시 즉각적으로 서버가 구동됩니다.
- 프로덕션 빌드: 프로덕션 빌드에 필요한 기능이 미비한 Esbuild 대신 사용한 Rollup은 각 모듈을 개별적인 범위의 함수로 맵핑하여 결합하는 Webpack 방식과 달리 하나의 파일에 모든 종속 모듈을 전역 범위로 선언해 결합합니다. 따라서 중복제거 및 가볍고 빠른 빌드 결과를 냅니다.
Webpack에서 Vite로의 마이그레이션 과정
Vite의 설정 파일들을 옮겨오기 위해 빈 Vite 프로젝트를 생성합니다.
참고로 Vite는 14.18 또는 16 이상의 Node.js를 요구합니다.
1. vite 프로젝트 생성
yarn create vite[프로젝트 명] --template react-ts2. 생성된 vite 프로젝트의 package.json 파일의 Script 명령줄과 devDependencies의 Vite 관련 내용을 마이그레이션 할 기존 프로젝트 package.json으로 복사
"scripts": { "start": "vite", "build": "tsc && vite build", "preview": "vite preview" }, "devDependencies": { ...생략... "@vitejs/plugin-react": "^4.0.0", "vite": "^4.3.2" }생성된 vite 프로젝트에는 “dev” : “vite”라고 되어 있지만, 기존 프로젝트에 맞추기 위해 dev가 아니라 start로 복사했습니다.
3. 기존 프로젝트의 node_modules 디렉토리를 제거 한 후 재설치
rm -rf ./node_modules/4. 설정 파일 복사
tsconfig.json: 기존 프로젝트에서 추가했던 compilerOptions이 있다면 복사해온 tsconfig.json에도 추가합니다.
src/vite-env.d.ts: 기존 프로젝트의 src/react-app-env.d.ts 파일에 추가한 내용이 있다면 src/vite-env.d.ts에도 추가합니다. 기존 프로젝트의 src/react-app-env.d.ts 파일은 제거합니다.
5. 기존 프로젝트에 있는 public/index.html 파일의 이동
기존 프로젝트의 public/index.html을 루트 디렉토리로 이동 후 index.html의 <body>에 아래 내용을 추가합니다.
<body> <div id="root"></div> <script type="module" src="/src/index.tsx"></script> </body>5번까지가 기본 설정이고, 이후 에러를 해결하기 위해 아래와 같은 설정을 했습니다.
트러블 슈팅
1. 절대 경로 사용
기존 프로젝트에서 작성된 절대 경로의 설정 방식을 변경했습니다.
import MindSpaceText from '@/images/MindSpaceText.png';tsconfig.json 파일과 vite.config.ts 파일을 아래와 같이 변경합니다.
// tsconfig.json "baseUrl": ".", "paths": { "@/*": ["src/*"] },// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; // 추가 export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), // 추가 }, }, });2. 환경 변수 설정 변경
기존 프로젝트에서는 REACT_APP_HOST로 api url을 환경변수로 지정했는데, vite에서 접근 가능한 환경 변수는 VITE_를 붙여야 합니다. 따라서 VITE_API_URL로 환경변수 정의 를 변경했습니다.
VITE_API_URL=http://localhost:8080/환경변수에 접근하고자 할 때는 ${import.meta.env.VITE_API_URL} 를 사용해서 접근합니다.
3. URI malformed 에러 해결
이제 파일 경로를 못찾는 문제는 발생하지 않았는데, 아래와 같은 에러가 발생했습니다.
[vite] Internal server error: URI malformed
구글링으로 stackoverflow에서 알려준 해결 방법으로 index.tsx파일을 변경했더니 해결되었습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> // "%PUBLIC_URL%" 삭제 <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/index.tsx"></script> </body> </html>
결과
- 기존 실행 시간 :
- vite 적용 후 실행 시간 :
비교해보면 개발 서버 구동이 매우 단축된 것을 확인할 수 있습니다.
에러를 해결할 때는 삽질을 많이 해서 힘들었으나 서버 구동 시간이 단축된 모습을 보니 웹 개발용 빌드 도구로 vite를 왜 많이 사용하는 지 깨달았습니다. 관심 있으신 분들은 한번 사용해보시는 걸 추천드립니다.
REF
https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/
728x90'Frontend' 카테고리의 다른 글
CSR vs SSR, Next.js (0) 2023.06.12 Recoil 적용과 에러 해결 (0) 2023.05.14