서론
실전 프로젝트를 진행하면서 성능에 관련된 여러가지 실험을 해보고 싶었다.
코드 스플리팅도 그중 하나인데,
개념만 들어봤지 실제로 적용해본 적도 없고
제대로 된 사용법과 이유에 대해서는 공부해본 적 없기 때문에
이번 기회에 정리해보려고 한다.
본론
정의
리액트 프로젝트는 완성 후 배포를 하기 위해서 빌드를 해야한다.
빌드는 리액트 애플리케이션의 소스 코드를 컴파일 하고 자바스크립트 및 HTML 로
변환하는 과정을 의미한다. 빌드의 프로세스로써 코드 변환 및 축소 번들링 같은
여러 작업이 포함될 수 있는데 이 과정에서 파일 크기를 가능하면 최소화 하는 것이
바람직 하다고 볼 수 있다. 일반적으로는 웹팩이 담당한다.
하나의 파일로 모든 자바스크립트를 묶어서 빌드하는 것은 효율적이지 않다.
묶은 파일의 크기가 매우 큰 데 코드를 한줄만 수정해도 모든 코드를
다시 새로 빌드해야 하기 때문이다.
예를들어 리액트 환경에서 메인, 포스트, 디테일 페이지로 이루어진 애플리캐이션을
개발한다고 했을 때 메인 페이지에 접속되어 있는 동안에는 포스트, 디테일 페이지의
정보는 사용자에게 필요하지 않을 것이다.
이러한 파일들을 분리하여 지금 당장 사용자에게 필요한 파일만 빌드할 수 있다면
로딩도 빠르게 이루어지고 트래픽도 줄어들어 사용자 경험이 좋아진다.
이를 코드를 비동기적으로 로딩한다고 하는데 대표적인 비동기 로딩의 예시가
코드 스플리팅이라고 할 수 있다.
React.lazy, Suspense
리액트 내부적으로 Suspense 컴포넌트와 lazy 함수를 지원한다.
React.Lazy는 컴포넌트를 렌더링 하는 시점에서 비동기 로딩을 지원하며
Suspense는 스플리팅 된 컴포넌트를 로딩하고 로딩 중에 보여줄 UI를 설정할 수 있다.
사용법은 다음과 같다.
import React, { lazy, Suspense } from 'react';
const Avatar = lazy(() => import('./AvatarComponent'));
const Info = lazy(() => import('./InfoComponent'));
const MoreInfo = lazy(() => import('./MoreInfoComponent'));
const DetailsComponent = () => (
<Suspense fallback={<p>Loading</p>}>
<Avatar />
<Info />
<MoreInfo />
</Suspense>
)Suspense의 fallback props로 로딩 컴포넌트를 설정하면 페이지가 로딩되기 이전에
해당 컴포넌트를 보여준다.
결론
팀원분이 우리 프로젝트에도 적용하셨는데,
생각보다 성능이 많이 향상되서 놀랐다.
체감되는 성능도 기분탓인지 좋아진 것 같은 느낌이 들었다.
깊게 들어가면 들어갈수록 더 깊어지는 것 같다.
