리액트 코드 스플리팅

Table of Contents

• 자바스크립트 함수 비동기 로딩 dynamic import
• React.lazy와 Suspense를 통한 컴퍼넌트 코드 스플리팅
• Loadable Compoent를 통한 코드 스플리팅

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

• 아직 표준 자바스크립트는 아니지만 stage-3 단계. 웹팩에서 지원하고 있어서 별도의 설정 없이 프로젝트에 사용 가능
• import를 함수로 사용하면 Promise를 반환.
• 모듈에서 default로 내보낸 것은 result.default를 참조해야 사용가능

export default function notify(){
    alert('안녕하세요!')
}

function App(){
    const onClick = () => {
        import('./notify').then(result => result.default());
    }
    return(
        <div>
            <button onClick={onClick}>Notify</button>
        </div>
    )
}

React.lazy와 Suspense를 통한 컴퍼넌트 코드 스플리팅

• React.lazy: 컴퍼넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 유틸함수
• Suspense: 리액트 내장 컴퍼넌트로 코드 스플리팅된 컴퍼넌트를 로딩하도록 발동시킬 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정.
• SSR 계획이 없다면 React.lazy와 Suspense로 구현 (추후 SSR 지원예상)
• SSR 계획이 있다면, Loadable Component를 사용. 리액트 공식문서에도 SSR할 경우 Loadable Component 라이브러리 권장.

import React, { useState, Suspense } from 'react';
const SplitMe = React.lazy(() => import('./SplitMe'));

function App() {
    const [visible, setVisible] = useState(false);
    const onClick = () => {
        setVisible(true);
    };
    return (
        <div>
            <button onClick={onClick}>Hello React!</button>
            <Suspense fallback={<div>loading...</div>}>
                {visible && <SplitMe/>}
            </Suspense>
        </div>
    );
}

Loadable Compoent를 통한 코드 스플리팅

• Loadable Component는 코드 스플리팅을 편하게 도와주는 서드파티 라이브러리.
  • SSR을 지원
  • 렌더링하기 전에 필요한 스플리팅된 파일을 미리 불러오는 기능
  • 타임아웃
  • 로딩 UI 딜레이

yarn add @loadable/component

• React.lazy와 비슷한 사용방법. 단, Suspense를 사용하지 않음.

import React, { useState, Suspense } from 'react';
import loadable from '@loadable/component';
// const SplitMe = React.lazy(() => import('./SplitMe'));
const SplitMe = loadable(() => import('./SplitMe'), {
    fallback: <div>loading...</div>
});

function App() {
    const [visible, setVisible] = useState(false);
    const onClick = () => {
        setVisible(true);
    };
    const onMouseOver = () => {
        SplitMe.preload(); // 미리 불러오기
    };
    return (
        <div>
            <button onClick={onClick} onMouseOver={onMouseOver}>Hello React!</button>
            {visible && <SplitMe/>}
        </div>
    );
}