code splitting에 대해 배워 보겠습니다 🤔

코드 스플리팅

• 파일을 분리하는 작업
• 프로젝트에 기본 탑재된 SplitChunks 기능을 통한 코드 스플리팅은 단순히 효울적인 캐싱 효과만 있다.
• 사용자가 방문하는 페이지만 보여줘야하는데, 파일 분리를 따로 설정을 안하면 모두 한 파일에 저장되기 때문에 사용자가 원하는 페이지 말고도 다른 페이지의 데이터가 넘어 오게 된다.
• 프로젝트 규모가 커지면 파일의 크기가 매우 커지기 때문에 로딩이 오래 걸려 사용자 경험이 좋지 못하다.

자바스크립트 함수 비동기 로딩

• import().then() 으로 클릭 됐을 때 import 되기 구현
  • <p></p> 태그를 클릭을 하면 ./notify에 있는 default 모듈이 불러 와 진다.

State를 사용한 코드 스플리팅

• onClick 을 통해 상태를 바꾸기
• 단점-> 매번 state를 설정해 줘야 해서 귀찮다.

React.lazy 와 Suspense 사용하기

• React.lazy
  : 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 유틸 함수
• Suspense 에서 fallback props를 통해 로딩 중에 보여 줄 jsx를 지정할 수 있다.

Loadable Components를 통한 코드 스플리팅

• Loadable Components : 코드 스플리팅을 편하게 도와주는 서드파티 라이브러리
  • 이점 : SSR 지원 (❗️React.lazy 와 Suspense 은 SSR 지원 안함), 렌더링 하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있음
• 컴포넌트 미리 불러 오기 (preload)
  -> onMouseOver 이벤트를 통해 preload() 를 등록