React Code Splitting
- 자바스크립트로 작성된 모듈들은 웹팩에서 압축되어 하나의 bundle file로 만들어진다.
- SPA(Single Page Application)환경에서는 맨 처음 페이지에 진입하게 되면 이 bundle file을 다운받음->전체 리소스를 한번에 다운로드한다.
- 앱 규모가 커지거나 네트워크 속도가 느릴 경우 사용자 경험의 저하 요인이 된다.
- 클라이언트에게 적절한 사이즈의 코드를 필요한 타이밍에 로드되도록 해 줄 필요성이 생긴다.
- React.lazy 및 Suspense는 리액트에서 공식적으로 지원하는 기능
- React.lazy: 컴포넌트를 렌더링하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수
- Suspense: 코드 분할된 컴포넌트를 로딩하도록 할 수 있고 로딩이 끝나지 않았을 때 보여줄 UI를 설정 가능한 리액트 내장 컴포넌트
- Code splitting을 라우팅에서 적용하는 예시이다.
- 컴포넌트 import 시 lazy()를 적용
- Suspense의 fallback에는 로딩이 끝나지 않았을 경우 보여줄 UI를 넣어 준다.
- Diary를 클릭하면 src_pages_Diary_js.chunk.js 파일을 불러오고 내부 코드 확인 가능
- 청크 파일 : 코드 분할하면 생성되는 자바스크립트 파일
- React.lazy 및 Suspense는 서버사이드 렌더링을 할 수 없다는 단점이 있다.
- 서버에서 렌더링 된 앱에서 코드 분할을 하려면 loadable components 를 사용.
- 서드파티 라이브러리이며 서버사이드 렌더링 지원 및 분할된 파일을 미리 불러올 수도 있음.
외부 라이브러리이기 때문에 인스톨이 필요 : npm install @loadable/component
- 선언부의 fallback은 생략도 가능하며 컴포넌트 별로 따로 선언도 가능하다.
- Preload()로 미리 불러오기 설정 가능
- 결과는 lazy()사용과 동일하다.
- 리액트 코드분할 공식 문서 : https://ko.reactjs.org/docs/code-splitting.html
- Loadable Components 공식 문서 : https://loadable-components.com/docs/getting-started/