React - Loadable Components를 통한 코드 스플리팅

Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리

 

이 라이브러리의 이점은 서버 사이드 렌더링을 지원한다(React.lazy와 Suspense는 아직 서버 사이드 렌더링을 지원안함).

또한, 렌더링하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다.

 

설치

// 일반
npm i @loadable/component
yarn add @loadable/component

// 타입
npm i --save-dev @types/loadable__component

 

사용방법 예시

import React from 'react';
import loadable from '@loadable/component';
import { Route, Routes, Navigate } from 'react-router-dom';
const Login = loadable(() => import('@pages/Login'));
const SignUp = loadable(() => import('@pages/SignUp'));

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate replace to="/login" />} />
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<SignUp />} />
    </Routes>
  );
};

export default App;