Vite 2 번들러 교체

CRA 기반 앱을 Vite 2로 교체했다. 2월에 2.0 나오고 지금은 2.3 정도. webpack 대비 체감은 "시동이 빠르다" 정도가 아니라 "이게 왜 가능하지" 수준.

왜 빠른가

dev 서버가 번들링을 안 한다. 브라우저가 ESM을 직접 요청하고 Vite는 요청된 파일을 온더플라이로 트랜스폼. 결과: 초기 dev server 구동이 1초 안쪽으로 떨어짐. 우리 프로젝트 기준 웹팩 CRA는 약 28초 걸림.

설정

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

export default defineConfig({
  plugins: [react()],
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { outDir: 'build', sourcemap: true }
})

마이그레이션 시 걸린 것

• process.env.REACT_APP_* → import.meta.env.VITE_*. 변수 이름 전부 리네임.
• webpack alias — resolve.alias로 그대로 옮기면 됨.
• CommonJS 전용 라이브러리 몇 개가 import로 안 풀림. optimizeDeps.include에 넣어서 pre-bundle 유도.
• svg import — @svgr/plugin-*로 플러그인 세팅 따로.

dev는 ESM이지만 prod build는 Rollup 기반. 런타임 차이가 생길 수 있다. 프로덕션 빌드로 E2E 한 번 꼭 돌려봐야 함.

결과

• dev start: 28s → 0.9s
• HMR: 평균 1.5s → 50ms 수준
• prod build: 1m 40s → 55s

지금까진 만족. 단 generic한 CLI 경험은 webpack이 훨씬 레거시 친화적이라서, 오래된 앱이면 바로 옮기진 말고 PoC 먼저 하는 게 낫다.