빌드 속도, 서버 시작 속도 향상을 위해 DevIn 프로젝트를 Vite로 마이그레이션 해봤다.
기존 DevIn 프로젝트 👉 https://github.com/parkinhwa/FEDC2_DevIn_Channi
👉 https://dev-in-to-vite.vercel.app/
yarn create vite
기존 프로젝트에서 사용했던 패키지를 설치해주었다.
// package.json
"dependencies": {
"@reduxjs/toolkit": "^1.8.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@vitejs/plugin-react": "^2.2.0",
"vite": "^3.2.3",
"axios": "^0.27.2",
"buffer": "^6.0.3",
"dotenv": "^16.0.1",
"loadsh": "^0.0.4",
"lodash": "^4.17.21",
"nanoid": "^4.0.0",
"prop-types": "^15.8.1",
"react-cookie": "^4.1.1",
"react-error-boundary": "^3.1.4",
"react-helmet-async": "^1.3.0",
"react-modal": "^3.15.1",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"styled-reset": "^4.4.1",
"web-vitals": "^2.1.4"
}절대경로를 src로 하도록 설정해주었다.
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@@": path.resolve(__dirname, "./src/"),
},
},
}); // jsconfig.js
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@@/*": ["/src/*"]
}
}
}다음과 같이 설정하면 import { component } from “@@/components” ⇒ import { component } from “/src/components” 와 같다.
src앞에 /를 안붙이면 Vite "rollup failed to resolve" build error 에러가 난다… (build.rollupOptions.external가 외부파일을 먼저 찾기때문이라고 한다)
const API = process.env.REACT_APP_API_BASEURL; const API = process.env.VITE_APP_API_BASEURL;.env
REACT_APP_API_BASEURL
REACT_APP_API_CHANNEL_ID
REACT_APP_OG_API_BASEURL VITE_APP_API_BASEURL
VITE_APP_API_CHANNEL_ID
VITE_APP_OG_API_BASEURL다음과 같이 빌드 속도가 훨씬 빨라진 것을 확인할 수 있었고 서버 시작 속도도 훨씬 빨라졌다!
성능 측정 웹 페이지에서 성능 측정하기 (https://tools.pingdom.com/)
점수가 드라마틱하게 오르진 않았지만 페이지 사이즈, 로드 시간, 요청 수 모두 눈에 띄게 감소한 것을 확인할 수 있다.