빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
박성욱 컬리 · 컬리 기술 블로그
AI 핵심 요약
5년간 성장한 CMS가 Webpack 4 빌드 중 OOM을 겪자, 메모리 증설과 캐시·청크 최적화만으로는 해결되지 않아 Vite 전환을 결정했습니다. 순환 참조를 정리하고, MobX 데코레이터와 레거시 라이브러리 호환성을 Babel 플러그인·alias·사전 번들링 설정으로 맞췄으며, 별도 브랜치에서 검증했습니다. 그 결과 설정 파일은 538줄에서 121줄로 줄고, 프로덕션 빌드는 48% 단축됐으며 개발 서버 시작은 47초에서 102ms로 빨라졌습니다. 체감이 아닌 측정으로 원인을 확인하고, 기술 부채를 안전하게 갚는 과정이 성능과 유지보수성을 함께 개선한다는 교훈을 얻었습니다.
- 번들러 전환 전 메모리 사용량과 빌드 시간을 측정해 문제의 임계치와 개선 효과를 확인하세요.
- 배럴 파일의 절대경로 import로 생긴 순환 참조는 상대경로 import로 정리할 수 있습니다.
- Vite는 Node.js 내장 모듈 폴리필을 자동 제공하지 않으므로 브라우저 호환 대체 라이브러리나 alias가 필요할 수 있습니다.
- 레거시 라이브러리의 빌드 호환성 문제는 해당 패키지만 Babel로 변환하는 식으로 범위를 좁혀 해결할 수 있습니다.
- 별도 브랜치에서 전환하고 검증한 뒤 병합하면 기존 환경으로 돌아갈 수 있어 마이그레이션 위험을 낮출 수 있습니다.
소개
CMS의 개발환경 변화 여정을 공유합니다.
비슷한 학습 자료
문서 박서진/박성범
모노리포 희망편, 절망의 리포가 희망의 리포로 부활하기까지 걸린 1년
문서 박은식 / 이예서
뒤에 개발자 있어요 | Simplicity 4 제작기 #2
문서 신지호
브라우저용 번들링 플러그인, 직접 만들었어요
컨퍼런스 INFCON 2024
난생처음 만드는 Vite 플러그인│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 난생처음 만드는 Vite 플러그인 - 이은재 우리가 개발할 때 사용하는 Vite라는 도구는 어떻게 돌아갈까요? 우리가 작성하는 .jsx, 혹은 .vue 파일들은 어떤 과정을 거쳐 .js 파일로 변환되는 걸까요? 분명히 Vite 플러그인을 여러 개 설치하면 되기는 하는데, 이게 왜 어떻게 되는 걸까요? Vite 플러그인을 같이 작성해 보면서 Vite 플러그인에 대해 아무것도 모르셨던 분도 그 구조와 작동 흐름에 대해 이해할 수 있게 될 거예요. Vite 플러그인은 다양하게 쓰이는데요. 예를 들어 이를 잘 활용하면 굳이 런타임에 할 필요 없는 연산을 빌드 타임에 미리 함으로써 런타임을 빨라지게 할 수도 있습니다. 번들러는 우리에게 겁을 주는 대표적인 존재인데요. 이 발표를 통해...
프론트엔드 개발 도구
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어