기존의 문제
로그인을 하지 않은 사용자에게는 로그인 페이지만을, 로그인을 한 사용자에게는 홈 페이지만을 보여주어도 되는 상황에서 지금 당장에 사용하지 않은 기능들을 담은 모듈 또는 페이지를 나의 번들 파일로 로드 하기 때문에 첫 페이지를 로드 하는데 초기 로딩속도가 느려지는 문제점이 발생했습니다.
그리고 프로젝트의 규모가 커지면 커질수록 리액트로 개발할 때 유틸리티 함수, 서드 파티 라이브러리 등 많은 모듈들이 사용되어 질 수 있는 상황에서 이러한 모듈들을 필요할 때만 불러오도록 해놓지 않으면 첫 페이지를 로드 하는데 로딩속도는 더욱 현저하게 느려지게 될 것이라고 생각했습니다.
개선 방법
React.lazy 와 Suspense hook을 활용하여 코드 스플릿팅 작업을 진행하였습니다.
우선 제가 만든 애플리케이션은 아주많은 유틸리티 함수나 서드 파티 라이브러리를 사용하는 것이 아니기 때문에
페이지를 기준으로 코드 스플릿팅 작업을 진행하였습니다.
그리고 lazy를 통해 동적으로 페이지를 불러오는 과정에서 각 페이지에 필요한 파일을 다운 받기 위해 약간의 시간이 소요 되는데 이때 따로 작업을 해놓지 않으면 error가 발생하거나 그냥 빈화면이 보여집니다.
이러한 애로 사항은 Suspense를 이용하여 항상 화면 좌측에 고정되어 있는 사이드 메뉴바를 보여줌으로 해결하였습니다.
초기 번들 파일 (하나의 파일로 합쳐있음)
React.lazy를 활용한 dynamic import를 적용하고 난 후 번들 파일
기존 540.34kb 였던 번들파일의 사이즈를 404.33kb 로 줄였습니다.
steadyness is all time way