code spliting

Code Spliting

개요

코드 스플릿팅은 페이지 로드시, 혹은 컴포넌트 로드시 당장 필요없는 코드의 로드를 지연하고, 이후에 필요해지게 되면 그때 코드를 로드하는 기법이다. 처음부터 반드시 도입할 필요는 없고, 이후 성능저하가 발생하였거나 혹은 최적화가 필요할때 시도하면 좋다.

방식

router-base

라우터를 기준으로 나누는방식이다. 보통 페이지가 변경될경우 필요한 파일이 다르기 때문에, 가장 쉽게 적용할수 있다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

compoent

컴포넌트 내에서도 모달창과 같이 페이지 로드와 동시에 필요하지 않은 컴포넌트를 분리처리 할수 있습니다. 이때, 해당 분리한 컴포넌트의 코드를 불러오는 시점은 경우에 맞게 결정해야합니다. 해당 컴포넌트 자체가 클릭되는 타이밍으로 할수도 있고, 혹은 마우스가 올려졌을때, 혹은 useEffect를 사용해 나머지 컴포넌트의 렌더링이 끝났을때등으로 결정할수 있습니다. 아래 예시는 단순히 컴포넌트가 클릭되어 불리어지는 타이밍에 코드를 불러옵니다.

const lazyModal = lazy(() => import('./component'));

const App = () => {
const [showModal,setShowModal] = useState(false)

return(
  <div>
    <Header/>
    <Main/>
    <Footer/>
    <Suspense fallback={<div>Loading...</div>}>
      {showModal?<lazyModal setShowModal={setShowModal}/>:null}
    </Suspense>
  </div>
)
};

분석

webpack bundle analyzer 도구를 통해 번들사이즈를 분석해 볼수 있습니다.

레퍼런스

코드 분할 [React] 코드 스플릿팅(Code Splitting)으로 최적화하기