[react]loadableを使用してコードを記述する

😈 3秒以内にWebサイトがロードされなければ、ユーザーは離れます.😈
3...
2...
1...!!
🧨🧨🧨
という言葉がある
フロントエンド開発者は、Webページを開発する際にユーザー体験を向上させるために、
重要なのは、彼に削除コード(code-sparsing)を作ることです.
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;

😇 どのような単位で分離すればいいですか?

サーバー側のレンダリングを行わないページ間で切断