[React] loadable을 사용한 코드 스플릿팅

😈 3초안에 웹사이트가 로딩되지 않으면 사용자들은 떠나갈 것이다...😈
3...
2...
1...!!
🧨🧨🧨
라는 말이 있다.

프론트엔드 개발자는 웹페이지를 개발할 때 사용자 경험을 높이기 위해서,
✨코드 스플릿팅(code-splitting)을 해주는 것이 중요하다.
loadable 라이브러리를 사용한 간단한 코드 스플릿팅 방법을 알아보자!

---

😇 loadable 라이브러리 설치

npm i @loadable/component
npm i @types/loadable__component // typescript 사용시

😇 loadable 라이브러리 사용법

// before
import LogIn from '@pages/LogIn'
import SignUp from '@pages/SignUp'

// after
const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

😇 로그인 & 회원가입이 있는 웹사이트 코드로 이해하기!

// App.txs
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import loadable from '@loadable/component';

// ✨loadable을 사용한 코드 스플릿팅
const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

const App = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={LogIn} />
      <Route path="/signup" component={SignUp} />
    </Switch>
  );
};

export default App;

😇 어떤 단위로 분리해야 하나?

서버사이드 렌더링을 하지 않는 page 단위로 분리