<aside> 📑

</aside>

들어가며

React + Vite 기반 SPA 프로젝트를 개발하면서, 기능 구현과 사용자 흐름은 어느 정도 안정화되었지만 초기 로딩 성능이 체감상 느리다는 피드백을 받았습니다.

Lighthouse로 성능을 측정해보니, 단순히 “느리다”가 아니라 번들 구조와 로딩 전략 자체를 다시 살펴봐야 하는 상황이라는 점이 드러났습니다.

이번 글에서는 단순히 설정을 나열하기보다는,

• Vite와 Rollup이 각각 무엇을 담당하는지
• 번들링이 내부적으로 어떻게 이루어지는지
• chunk 분리 전략이 성능에 어떤 영향을 미치는지
• 그 이해를 바탕으로 실제 Lighthouse 성능을 개선한 과정

을 순서대로 정리합니다.

1. Vite는 무엇이고, 왜 빠를까?

Vite의 역할

Vite는 단순한 번들러라기보다는,

개발 서버 + 빌드 도구를 포함한 프론트엔드 개발 환경

에 가깝습니다.