[성능] Route-based code splitting

[SEMINSEMINSEMIN]

무엇을 위해 리팩토링 하나요?

• [x] 성능 개선
• [ ] 접근성 개선
• [ ] 코드 중복 개선
• [ ] 컨벤션 정리

code splitting이란?

라이브러리나 컴포넌트가 실제로 필요해질 때, 나중에 불러오는 것

code splitting 사용 이유

SPA의 단점 중 하나는 사용하지 않을 수 있는 페이지의 자바스크립트까지 한꺼번에 번들링하여 초기 로딩속도가 느릴 수 있다는 점이다. 이러한 문제점을 해결하기 위해 라우트에서 code splitting을 사용했다.

페이지 전환에 따라 청크 파일이 source에 추가되는 모습

https://user-images.githubusercontent.com/104843477/213151922-f5800cd7-4843-4e1c-a1b9-8226c8e2f5e7.mp4

성능 비교

post 페이지 기준으로 라이트하우스 성능 측정

기존

code splitting 후

특이사항

• 기존: NavBar와 Profile에서 Loading.jsx를 불러옴
• 수정 후: Router.jsx에서 Suspense의 fallback으로 Loading 컴포넌트 이용을 통해 웹 페이지 불러오는 시간동안 Loading.jsx 컴포넌트를 보여주도록 함

참고 페이지

• https://reactjs.org/docs/code-splitting.html
• https://velog.io/@gth1123/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0

[github-actions[bot]]

Branch refactor/issue-394 created for issue: [성능] code splitting