React, how do i improve page loading?

리액트로 큰 프로젝트를 진행하다보면 페이지 진입 후 로딩속도가 길어지는 현상을 겪게된다.

리액트의 구조적인 문제로, 모든 파일이 번들링되어 index.html포함되기 때문이다.

이에대한 해결책으로 많이 언급되는것들이있다.

 

그 중에서 Code-splitting을 통한 로딩속도 향상 방법을 소개한다.

특히, 가장 간단하면서도 react에서 기본으로 지원해주는 기능을 이용하도록 하겠다.(v16이상)

 

바로, 리액트의 Suspense와 lazy이다.

간단하게는 Route에서 각 페이지 컴포넌트들을 lazy로딩하는 구조를 취한다.

다시 말하면, Switch를 통해 페이지 컴포넌트가 요청될때 해당 컴포넌트를 import하는 구조이다.

 

기본적인 사용법도 매우 간단하며 Docs도 아주 깔끔하게 잘되어있다.

[React Docs] https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

위의 문서에보면 하단부에 잘 나타나있다.

 

import React, { Suspense, lazy } from 'react';
...

const Home = lazy(() => import('./pages/home'));
const Profile = lazy(() => import('./pages/profile'));

...


const App = ({}) => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>...loading</div>}>
        <Route exact path='/' component={ Home } />
        <Route path='/profile' component={ Profile } />
      </Suspense>
    </BrowserRouter>
  )
}

 

대략, 이처럼 사용할 수 있다.

작은 프로젝트에서는 그 효율이 낮을수있으나 프로젝트가 커질수록 크 효율이 높아지는것으로 보인다.

해당 소스를 적용하는게 어렵다거나 시간적으로 오래걸리는것도 아니니,

처음부터 구조를 잘 갖춰나가면 될것같다.

 

(작은 프로젝트에서 Lazy를 적용함으로써 생기는 문제/단점이 있다면 댓글 부탁드립니다... 궁금해서요)