리액트 성능 최적화 기법 3 - 코드 스플릿, lazy-loading

문제

 

원래 이렇게 평범하게 import 해서 Routing 하던 컴포넌트가 있다.

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import './App.css'
import ListPage from './pages/ListPage/index'
import ViewPage from './pages/ViewPage/index'

function App() {
  return (
    <div className="App">
      <Switch>
        <Route path="/" component={ListPage} exact />
        <Route path="/view/:id" component={ViewPage} exact />
      </Switch>
    </div>
  )
}

export default App

어떤 번들을 사용하고 있는지 확인할 수 있는 도구인 cra bundle analyzer을 가동해보면

청크를 한 뭉탱이 가져와 적절하지 않게 사용하고 있다는 것을 알 수 있다. (refractor은 특정 페이지에서만 사용되는 모듈이다.) 

지금 사용하고 있는 페이지에서는 사용하지 않는 자바스크립트 파일을 로드하기 때문에 성능 저하가 발생한다. 

 

이번 최적화는 적절한 사이즈의 코드를 적절한 타이밍에 로드 시키는것이 목표이다.

 

 

해결

 

위의 코드에 lazyLoading과 suspense를 적용하고 다시 cra bundle analyzer를 작동시킨다

import React, { lazy, Suspense } from "react";
import { Switch, Route } from "react-router-dom";
import "./App.css";

const ListPage = lazy(() => import("./pages/ListPage/index"));
const ViewPage = lazy(() => import("./pages/ViewPage/index"));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;

 

 

하나로 합쳐져있던 파일이 갈색과 파랑색등 여러 컬러로 분리되어있다.

페이지에 따라 필요한 만큼만 번들를 받아와 사이트 성능을 높이는 방법이었다.