React와 Vite에서 번들 용량 최적화 방법
·
개발/프론트엔드
이번 포스팅에서는 기존에 진행했던 팀 프로젝트에서 빌드 후 배포하는 과정과 용량을 최적화하는 과정에 대해서 포스팅해보려고 한다. 이 과정이 중요한 이유는 고정적으로 발생하는 네트워크 비용을 줄일 수 있기 때문이다. 구체적인 수치는 아래 글에서 비교, 분석해 보는 것으로 하겠다. ⚠️Warning일전에 프로젝트를 완료하고 Vercel 배포를 진행하기 전, 배포 명령어인 `npm run build`가 제대로 동작하는지 로컬에서 확인하고자 하였다. 해당 명령어를 실행하니 빌드는 잘되었다. 하지만..에러는 아니지만 Vite에서 경고문구를 출력해 주었다. 이 문구의 내용은 다음과 같다.(!) 일부 청크는 최소화 후 500 kB보다 큽니다. 다음을 고려해 보세요:- 동적 import() 사용: 애플리케이션을 코드 ..