Loadable Components를 통한 코드 스플리팅

React가 내장한 React.lazy와 Suspense를 쓰는 것이 좋다고 생각하지만 아직 까지도 SSR을 지원하지 않고 있다.

때문에 페이스북 측에서도 Loadable Components를 사용할 것을 권고 하고 있다.

 

 

 

공식 문서 : https://loadable-components.com/

github : https://github.com/gregberge/loadable-components

npm 주간 다운로드 수는 15만 정도 수준입니다.

 

 

설치

npm install @loadable/component

 

 

사용법

 

React.lazy와 사용법이 많이 비슷합니다만 Suspense를 쓰지 않고 곧바로 fallback 설정을 해줄 수 있는 점이 다릅니다.

// React.lazy
const SplitMe = React.lazy(() => import("./SplitMe"));

// loadable
const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>로딩중입니다</div>,
});

 

사용 방법은 다음과 같습니다. 너무 간단!

import React, { useState } from "react";
import "./App.css";
import loadable from "@loadable/component";

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>로딩중입니다</div>,
});

function App() {
  const [visible, setvisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setvisible(true);
        }}
      >
        가져오기
      </button>
      {visible ? <SplitMe /> : null}
    </div>
  );
}

export default App;

 

 

preload 구현하기

 

preload, 즉 미리 불러오는 것이 왜 필요하냐면, 컴포넌트를 보고 싶을 때 발생하는 이벤트에서 로딩을 시작하는 것보다. 그 전단계에서 미리 불러오는 것이 UX 적인 측면에서 편리하기 때문입니다.

 

예를 들어 로딩 버튼을 누르기 전, 마우스를 호버하는 시점부터 로딩을 시작하면 사용자 입장에서는 로딩이 빨리 된다고 생각하게 될 것입니다.

 

onMouseOver 속성에 preload 메서드만 사용해주면 끝!

 

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>로딩중입니다</div>,
});

function App() {
  const [visible, setvisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setvisible(true);
        }}
        onMouseOver={() => {
          SplitMe.preload();
        }}
      >
        가져오기
      </button>
      {visible ? <SplitMe /> : null}
    </div>
  );
}

 

 

 

 

 

futhermore

 

preload 기능 외에도 

 

timout

https://loadable-components.com/docs/timeout/

import loadable from '@loadable/component'
import { timeout } from 'promise-timeout'

// Wait a maximum of 2s before sending an error.
export const OtherComponent = loadable(() =>
  timeout(import('./OtherComponent'), 2000)
)

 

delay

https://loadable-components.com/docs/delay/

import loadable from '@loadable/component'
import pMinDelay from 'p-min-delay'
// Wait a minimum of 200ms before loading home.
export const OtherComponent = loadable(() =>
  pMinDelay(import('./OtherComponent'), 200)
)

 

등 많은 기능이 있습니다. 편하신 방법으로 사용하시면 됩니다.