성능 최적화(코드 스플리팅)

코드 스플리팅이란 ? 

- 자바스크립트로 개발하였을 때에 프로젝트가 커질 수록 자바스크립트 파일 용량이 커지고 용량이 커지면 페이지 로딩속도가 느려지게 되는데, 이 부분에 있어서 지금 필요한 코드가 아닌경우에는 나중에 필요할때 불려지도록 하는 작업을 말한다. 이를 통해서 로딩속도를 개선할 수 있다.

프로젝트의 페이지 중에 꼭 필요한 페이지와 필요하지 않을 수 있는 페이지를 나누어 필요하지 않을 수 있는 페이지의 경우 스플리팅되도록 작업했다. 이렇게 분류된 페이지로는 프로필 설정 페이지, 회원탈퇴 페이지, 에러 페이지, 서버점검 페이지로, 해당 페이지들은 React.lazy를 통해 스플리팅 작업을 했다.

React.lazy와 함께 suspense를 사용하여 해당 페이지들이 필요시 불려올때 로딩페이지를 띄워줄 수 있도록 작업했다.

 

★ 실전 프로젝트 1차 성능 최적화 결과 :
https://github.com/DaVinciCodeGame/frontend/wiki/%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0

성능 개선