[React] 성능 개선기

프로젝트의 Ligthouse를 확인해봤다.

?! 성능이 갈려버렸다...

그래서 바로 성능 개선을 나서기로 했다! 

1. Code Splitting 

import Header from '../components/header';
import Test from '../pages/test';
import TestCreate from '../pages/testCreate';

// ...

다음과 같이 Router 를 사용하는 부분에서 각 페이지 컴포넌트를 Splitting 할 계획이다. 

 

그 이유는 React 공식 사이트에서도 나오는데, 현재 페이지에서 사용자 경험을 해치지 않고 

번들을 나누기 위해서는 라우트가 가장 확실하기 때문이다. 

 

사용할 것은 React에서 제공하는 lazy와 Suspense이다. 

lazy는 동적으로 import할 수 있는 함수로 실제 사용할 때 해당 컴포넌트를 import 할 계획이다. 

 

그리고 Suspense는 lazy 컴포넌트가 로드되는 동안 로딩 화면처럼 예비 컨텐츠를 보여준다. 

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Loading from '../components/common/Loading';

const Header = lazy(() => import('../components/header'));
const Test = lazy(() => import('../pages/test'));
const TestCreate = lazy(() => import('../pages/testCreate'));

const Router = () => {
  return (
    <BrowserRouter>
       <Suspense fallback={<Loading />}>
        {/* Header */}
        <Routes>
          <Route path="/" element={<Header />} />
        </Routes>

        {/* Contents */}
        <Routes>
          <Route path="/test" element={<Test />} />
          <Route path="/test/create" element={<TestCreate />} />
        </Routes>
       </Suspense>
    </BrowserRouter>
  )
}

2. 불필요한 코드 제거 

이것은 굳이 Light House 때문이 아니더라도 사용하지 않는 함수 또는 import는 없애야 한다. 

불필요한 코드를 모두 번들링하면 당연히 시간이 더 걸리기 때문이다. 

3. react-icons

프로젝트에서 간단한 아이콘을 사용하기 위해서 react-icons 라이브러리를 사용하는데, 

이 친구가 실제 사용하는 아이콘에 비해 chunk 파일어 엉청 크다. 

 

react-icons는 아이콘 종류별로 구분되어 있는데, 여기서 하나만 가져오더라도 모든 아이콘을 가져오기 

때문에 성능에 문제를 발생시킨다. 

 

그래서 react-icons는 @react-icons/all-files 라는 별도의 라이브러리를 제공한다. 

@react-icons/all-files는 아이콘 별로 자바스크립트 파일을 가지고 있기 때문에 훨씬 적은 chunk를 만든다. 

4. 정적 이미지 파일 

프로젝트에서 정적인 이미지 파일들은 assets에 넣어서 관리했는데, 

이것을 import로 가지고 오니 용량 문제로 성능 이슈를 발생 시켰다. 그래서 이것들은 AWS S3에 올려서 

파일 대신 링크를 사용해서 해결했다. 

5. svg 이미지 제공

LightHouse에서 페이지의 이미지에 대해서 렌더링된 이미지와 실제 이미지의 크기를 비교하는 작업을 한다. 

비교하는 이유는 브라우저에 렌더링된 이미지보다 실제 제공되는 이미지가 클 경우 바이트가 낭비되고, 

페이지 로드 시간이 느려진다. 

 

이것을 방지하기 위해서 png 이미지를 svg 이미지로 바꿔서 제공했다. 

svg 이미지는 한정된 양의 코드를 사용해서 페이지 로드 시간으로부터 비교적 자유롭다.

6. Chrom 개발자 도구 끄기 

React를 사용해서 개발한다면 React Developer Tools 라는 확장 프로그램을 사용하는 사람이 많은 것이다. 

근데 이 친구는 실제 서비스 환경에서는 실행되지 않는다.

 

하지만 나는 develop 환경 즉, local에서 작업하기 때문에 lighthouse를 측정할 때 함께 측정이 되었다. 

이 빌어먹을 친구가 어마무시한 용량을 잡아먹고 있어서 lighthouse 성능 측정이 잘 나올 수가 없었다. ...

 

그래서 React Developer Tools의 설정을 클릭 시 활성화로 변경해서 lighthouse 성능 측정 시 끄고

테스트를 하니 훨씬 좋은 결과가 나왔다. 

 

성능 개선 결과