코드분할(Code-Splitting)

자바스크립트로 어플리케이션을 개발하게 되면 기본적으로 하나의 파일에 모든로직이 들어가서 용량이 커지고 속도가 느려지는 문제가 생기는데
이를 방지하기 위해 코드를 따로 분리 시키고 비동기적으로 필요할때 불러와서 사용할수 있게 하는 것이다.
리액트에서는 lazy-suspense를 이용해서 하는 방법과 react-loadable이라는 라이브러리를 이용해서 코드분할을 하는 방법이 있는
lazy의 경우에는 SSR에서는 사용을 하지못한다. 하지만 지금 프로젝트의 경우 한개의 페이지로 돌아가고 있으므로 lazy를 사용했다.
라우터와 함께 사용을 했는데 사용방법은 굉장히 간단하다.

 import {lazy, Suspense} from "react";
 
 const Main = lazy(() => import("./pages/Main"));

로 사용하면 된다 여기서 밑의 import 부분이 기존의

import Main from "./pages/Main";

처럼 선언된거라고 보면 된다

<Suspense fallback={<LoaderWrap><Loader/></LoaderWrap>}>
  <ConnectedRouter history={history}>
      <Route path="/" exact component={Main}/>
  </ConnectedRouter>
</Suspense>

그리고 Suspense를 씌워서 fallback에 컴포넌트가 렌더링 되기전까지 Loader를 보여주는 방식으로 코드를 진행했다.
라우팅으로 넘어가는 페이지들을 코드분할 해서 적용을 하고 성능 비교를 lightHouse를 통해서 해봤는데
Lighthouse 점수 mobile기준으로 30점에서 -> 57~60점사이로 올라갔고 밑의 수치들을 봤을때 거의 2배이상의 이득을 봤다.
FCP(first contentful Paint) 9.8초 => 4.9초
SpeedIndex => 9.8초 => 4.9초
LCP(LargestContentfulpaint) 15초 => 7.9초
TTL(Time to Interactive) 15.8초 => 4.9초