[React] 프론트엔드 성능 최적화

만들었다고 끝이아니다.

사이트의 성능개선을 위해 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구 LightHouse로 측정했고 하성능 최적화를 위해 하나하나씩 해결이 필요했다.

우선 각각의 컴포넌트 파일이 어떤 코드로 구성이 어떻게 되어 있는지 확인이 필요했고, 어떻게 하면 초기 리로딩 성능을 개선할지 인사이트를 주는 cra-bundle-analyzer라는 패키지를 발견해서 적용해보았다.

설치

1. 먼저 webpack-bundle-analyzer를 devDependencies로 설치

$ yarn add -D webpack-bundle-analyzer

2. cra-bundle-analyzer도 devDependencies로 설치

$ yarn add -D cra-bundle-analyzer

3. 아래 명령어를 실행하면 /build/report.html가 static으로 생성된다.

$ npx cra-bundle-analyzer

결과

마우스를 올려보면 파일의 사이즈를 자세하게 확인할 수 있습니다.

• Stat size(webpack 번들링 후 축소 최적화 전의 입력 크기)
• Parsed size(변환 이후 파일의 사이즈
• Gzipped size(gzip 압축 이후 사이즈)

생각보다 가져다쓴 라이브러리들이 묵직하게 자리를 차지하고있었고, 결과를 참고로 하나씩 최적화 작업을 진행했다.

 

1. code-splitting, lazy-loading

리액트공식문서(코드분할) >

 spa의 특징상 이때, 우리는 당장 보지 않아도 될 페이지의 리소스까지 기다리게되고, 리소스를 다 다운 받게 되면, 처음 페이지가 렌더링되므로 초기 렌더링 속도 개선을 위해서 code-splitting 기법을 이용하여 페이지 진입시 해당 컴포넌트 리소스를 다운받도록 동적 처리가 필요.

 

사용방법

공식문서에 따르면 라우트입니다. 번들을 균등하게 분배할 곳을 찾으라 한다. 

모든 컴포넌트를 import하는 app.js에서 React.lazy를 React Router 라이브러리를 사용해서

애플리케이션에 라우트 기반 코드 분할

import React, { Suspense, lazy } from "react";
import "./App.css";
import { ConnectedRouter } from "connected-react-router";
import { history } from "../redux/configureStore";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { userCreators } from "../redux/modules/user";

const MainPage = lazy(() => import("../pages/MainPage"));
const KakaoRedirect = lazy(() => import("./kakaoRedirect"));
const GitHubRedirect = lazy(() => import("./GitHubRedirect"));

const MyPageInfo = lazy(() => import("../components/MyPageInfo"));
const PostWrite = lazy(() => import("../pages/PostWrite"));
const PostEdit = lazy(() => import("../pages/PostEdit"));
const PostDetail = lazy(() => import("../pages/PostDetail"));
const Markdown = lazy(() => import("../components/Markdown"));

const Header = lazy(() => import("../components/Header"));
const Message = lazy(() => import("../components/headerFunction/Message"));
const Footer = lazy(() => import("../components/Footer"));
const NotFound = lazy(() => import("../shared/NotFound"));

.....

return (
    <Router>
      <Suspense fallback={<></>}>
        <div className="App">
          <Header />
          <ConnectedRouter history={history}>
            <Switch>
              <Route path="/" exact component={MainPage}></Route>
              {/* <Route path="/message" exact component={Message}></Route> */}
              <Route path="/mypage/:id" exact component={MyPageInfo}></Route>
              <Route path="/postadd" exact component={PostWrite}></Route>
              <Route path="/postedit/:id" exact component={PostEdit}></Route>
              <Route path="/addmarkdown" exact component={Markdown}></Route>
              <Route
                path="/postdetail/:id"
                exact
                component={PostDetail}
              ></Route>
              <Route
                path="/user/kakao/callback"
                exact
                component={KakaoRedirect}
              ></Route>
              <Route
                path="/user/github/callback"
                exact
                component={GitHubRedirect}
              ></Route>
              <Route component={NotFound}></Route>
            </Switch>
          </ConnectedRouter>
          <Footer userInfo={userInfo} />
        </div>
      </Suspense>
    </Router>
  );

결과

초기렌더링속도가 말도안되게 향상되었다...(오른쪽 개선후)

 

2. 이미지 최적화 (Properly size images, Serve images in next-gen formats, Efficiently encode images)

이번프로젝트의 경우 이미지를 따로 불러오는 서비스가 아니었기 때문에 프론트 자체적으로 이미지 리사이즈를 해주었다. 만약 백엔드에서 이미지를 받아오는 경우라면, CDN(Contents Delivery Network)을 이용한다고한다.

ex) (이미지 포맷 변경 및 사이즈 변경) http://cdn.image.com?src=[img src]&width=200&height=100

 

3. 텍스트압축

https://web.dev/uses-text-compression/