📖 들어가며웹 애플리케이션이 커질수록 번들 크기도 함께 커지게 됩니다. 이는 초기 로딩 시간에 직접적인 영향을 미치죠.Vite에서 제공하는 Code Splitting 기능을 활용하면 이 문제를 효과적으로 해결할 수 있습니다. 해당 글에서는 manualChunks에 대해서만 다룹니다.왜 Code Splitting이 필요할까?웹 애플리케이션을 빌드하면 모든 Javascript 코드가 하나의 큰 파일로 번들링 됩니다.하지만 이 상황은 아래 문제들을 일으킬 수 있습니다.긴 초기 로딩 시간: 사용자가 첫 페이지를 보기 전에 모든 코드를 다운로드해야 합니다.불필요한 리소스 낭비: 당장 필요하지 않은 코드도 함께 불러옵니다.비효율적인 캐싱: 작은 코드 변경에도 전체 번들을 다시 다운로드해야 합니다.메모리 사용량 증..

📖  들어가며최근 회사에서 담당하는 서비스에 대해서 CRA에서 Vite로 마이그레이션을 하면서 약간의 코드 개선까지 진행을 하는 경험을 갖게 되었습니다. 프로젝트 규모가 작은 편이 아니었기 때문에 마이그레이션을 하면서 webpack에 의존하고 있는 등의 사이드이펙트가 발생하는 부분에서 제일 걱정을 많이 했는데요. 이번 글에서는 크게 왜 마이그레이션을 진행했는지, CRA와 Vite는 어떤 차이가 있는지 어떻게 진행했는지, 어떤 결과가 있었는지 기록하려 합니다.⁉️ 마이그레이션의 필요성현재 담당한 서비스는 webpack 기반의 CRA로 구성된 프로젝트였습니다. 첫 번째, 오래 걸리는 개발 서버 구동시간이었습니다.구동되는 시간까지 평균 약 20초가 소요되고 최대 약 30초까지 소요되는 상황이었습니다. 두 번..