[React:리엑트] Code splitting(코드 스플리팅)

웹 사이트의 성능을 개선하기 위한 여러 가지 방법 중 하나로 코드 스플리팅이 있다. 코드 스플리팅은 뭘까? 

코드(code) + 스플리팅(splittin) 의 합성어로 직역하면 코드의 파편화, 코드를 파편화한다. 왜 코드를 파편화할까? 

React 생각해보자. React는 CSR으로 클라이언트에서 모든 페이지를 기억하고 있다. 즉 모두 자바스크립트로 페이지가 생성되고 만들어진다고 봐도 무방하다. 이 말은 다시 말하면 최초 진입 시에 모드 페이지의 정보를 로딩하여 생성하기 때문에 초기 진입속도가 굉장히 느리다. 그래서 이러한 초기 진입속도를 해결하기 위해서 등작한 것이 바로 코드 파편화 코드 스플리팅이다. 코드 스플리팅은 사용한 소스만 로드해서 사용하는 것을 의미하는데. React에서는 이러한 기능을 컨포넌트로 지원하고 있다. 사실 개념만 안다면 구현하기는 생각보다 쉽다. 간단하게 알아보자. 

React.lazy 

import OtherComponent from './OtherComponent';

위 소스는 코드 스플리팅이 적용되기 전 예시 소스 코드이다. 

const OtherComponent = React.lazy(() => import('./OtherComponent'));

아래 소스는 코드 스플리팅이 적용된 소스 코드이다. 

 

React 내장함수인 lazy는 import()를 호출하는 함수를 인자로 가지며, 반드시 default export를 가진 promise를 반환해야 한다.

 

lazy 함수는 SSR에서는 지원하지 않기에, ssr을 사용하는 경우에는 loadable을 사용한다. 

 

React.Suspense

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Suspense 컴포넌트는 lazy 컴포넌트가 로드되길 기다리는 동안 예비 콘텐츠를 보여준다.

 

정리 및 느낀 점

• lazy 컴포넌트를 사용하여 웹 초기속도를 단축할 수 있다.
• Suspense 컴포넌트를 사용하여 lazy 컴포넌트가 로드되는 동안 예비 콘텐츠를 보여줄 수 있다.
• ssr을 사용하는 경우 lazy 컴포넌트를 지원하지 않기 때문에 loadable을 사용한다. 

생각할 점

• 네트워크 장애 같은 이유로 모듈을 로드에 실패한 경우 에러 처리는???