[React.js] 코드 스플리팅 (Loadable)

[React.js] 코드 스플리팅

코드스플리팅 (Code Splitting)

코드 스플리팅이란 말 그대로 코드를 잘라주는 것을 의미한다.

리액트의 라우터파일에서 아래와 같이 Login, Signup과 같은 컴포넌트가 있을때 각 컴포넌트가 필요할 때만 import 해주는 것이 코드 스플리팅이다.

아래 코드에선 Loadable이라는 라이브러리를 활용해서 코드 스플리팅을 위한 import문을 만들었다.

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import loadable from '@loadable/component';

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LogIn />} />
        <Route path="/login" element={<LogIn />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

만약 프로젝트가 엄청 커서 url path가 20개인 상태에서 각각의 컴포넌트가 다르다고 생각하면 login을 들어가기 위해 20개의 파일이 다 필요한 경우가 생긴다. 이 때 로그인에 필요한 로그인 컴포넌트만 import 하면 유저는 훨씬 쾌적하게 웹을 사용할 수 있을것이다.