변경이유
CRA는 더이상 React에서 권장하지 않는 방법이다. 때문에 Vite로 마이그레이션 하기로 결정했다.
CRA의 경우 node_modules의 크기가 상당히 크기 때문에 빌드 속도가 느리고, UX, SEO 측면에서도 나쁨.
참고사항
- 기존 CRA의 경우 index.html 파일이 public 내에 위치했다면 Vite는 루트에 위치하고 있다.
-
기존 index.html 내 %PUBLIC_URL%로 되어 있던 경로는 모두 삭제해준다.
-
를 다음과 같이 수정한다.
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script type="module" src="/src/index.jsx"></script> </body>
-
-
루트에 vite.config.js 파일을 생성해 아래와 같이 설정해주었다.
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: parseInt(process.env.PORT) || 13001, open: true, }, esbuild: { loader: "jsx", include: /src\/.*\.jsx?$/, exclude: [], }, build: { outDir: "build", }, });
- 기존 CRA를 삭제해주었다.
npm uninstall react-scripts
-
package.json 파일의 scripts가 아래와 같이 수정되었다.
"scripts": { "start": "env-cmd -f .env.local vite", "dev": "env-cmd -f .env.development vite", "prod": "env-cmd -f .env.production vite", "build": "env-cmd -f .env.local vite build", "build:dev": "env-cmd -f .env.development vite build", "build:prod": "env-cmd -f .env.production vite build", "serve": "vite preview", "test": "react-scripts test", "eject": "react-scripts eject" },
-
.env 파일 재설정 (아래와 같이 재설정)
REACT_APP_API_URL -> VITE_API_URLprocess.env.REACT_APP_ADMIN_URL_DETAIL -> import.meta.env.VITE_ADMIN_URL_DETAIL
결과
위는 로컬 시연.
위는 빌드 시연.
M1 pro 14인치 모델로 테스트 결과 로컬 실행 시간은 약 1~2초 단축, 빌드 시간은 약 5초 이상 단축 되는 걸 확인.
++추가
ip 접속 위해 프로젝트 열 때 host 설정 추가
package.json
"scripts": {
"start": "env-cmd -f .env.local vite --host 0.0.0.0",
"dev": "env-cmd -f .env.development vite --host 0.0.0.0",
"prod": "env-cmd -f .env.production vite --host 0.0.0.0",
"build": "env-cmd -f .env.local vite build",
"build:dev": "env-cmd -f .env.development vite build",
"build:prod": "env-cmd -f .env.production vite build",
"serve": "vite preview",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
꾸준한 기록을 통해, 좋은 개발자가 되겠습니다.