Webpack4 탈출! Vite로 CMS 빌드 성능

5년 된 CMS 프로젝트에서 Webpack4의 OOM 에러 발생으로 Vite로 전환

Vite 도입 후 빌드 시간 48% 감소, 개발 서버 460배 빨라짐

설정 파일 77% 간소화, 번들 크기 81% 감소 등 긍정적 결과 달성

Webpack4의 구조적 문제점

Webpack4는 JavaScript 기반으로 전체 의존성 그래프를 메모리에 유지하여 OOM 에러를 유발했다. 구체적으로 순환 참조, Scope Hoisting 실패 등이 메모리 사용량 증가의 원인으로 작용했다. 따라서 프로젝트 규모가 커질수록 빌드 속도 저하 및 메모리 부족 문제가 심화되었다.

Vite의 ESM 기반 개발 서버

Vite는 ESM(ECMAScript Modules) 기반 개발 서버를 통해 OOM 문제를 근본적으로 해결했다. 개발 서버는 전체 프로젝트를 번들링하지 않고, 필요한 모듈만 요청 시점에 제공한다. 반면 Webpack4는 전체 번들링 후 제공하여 개발 서버 시작 시간이 오래 걸리는 단점이 있었다.

마이그레이션 과정에서 겪은 문제들

마이그레이션 과정에서 Node.js 내장 모듈 호환성, CSS 문법 에러, react-csv 라이브러리 호환성 등 다양한 이슈가 발생했다. 구체적으로 qs alias 설정, esbuild logOverride 설정, babel 설정 등을 통해 문제를 해결했다. 따라서 Vite 전환 시 기존 스택과의 호환성을 꼼꼼히 확인해야 한다.