웹 성능 개선 - javascript편

 

 

https://dalichoi.tistory.com/32

웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지)

이미지편에 이어 웹 성능 개선을 이어가보자. 

이번에는 자바스크립트를 정리하는 편이다.

참고로 CRA로 만든 리액트 환경이다.

 

 

이전 상태

 

1. 사용하지 않는 의존성 제거

먼저 코드 중 사용하지 않는 의존성을 싹 걷어내는 작업부터 진행했다. 

사용하지 않는 의존성을 확인하기 위해 npm-check 라이버러리를 이용했다.

https://www.npmjs.com/package/npm-check

npm-check

Install

$ npm install -g npm-check

Use

$ npm-check

설치하고 실행하면 이런 화면이 나온다.

실행 화면

업데이트 가능한 라이브러리와 사용하지 않는 것 등 다양한 정보를 알려준다. -u 옵션을 이용하면 업데이트까지 손쉽게 할 수 있도록 도와준다.

업데이트 화면 예시

이모티콘과 함께 'NOTUSED?'라는 메시지로 사용중인지 물어보는 것들이 있을 것이다. 무조건 삭제하지말고 일단 불필요한 건 삭제를 하고, 모르는 건 필요한 건지 확인해 보고 삭제하도록 하자. 나같은 경우는 바로 아래에서 언급하겠지만 아래처럼 번들 파일 분석에 필요한 것까지 NOTUSED로 표기되어 있다. 이처럼 사용하는 것인지 재차 확인하고 삭제한다.

 

삭제하고 다시 성능테스트를 돌려보니,

 

불필요한 게 맞았던지... 민망하게도 제법 좋아졌다.😅

그래도 여전히 개선할 부분이 있다.

 

 

 

 

 

2. Bundle-analyzer

개발자도구 항목 중 Performance 탭을 이용하면 페이지 호출부터 쭉 진행되는 과정을 아래처럼 그래프로 볼 수 있다.

이 화면에서 마우스 스크롤을 통해 확대/축소를 하며 병목현상이나 비중이 큰 스크립트를 확인할 수 있다. 보통 번들링 된 파일이 당연하게도 덩치가 큰 걸 확인할 수 있다. 이때 번들 파일 속에 어떤 코드가 비중이 큰 건지 확인하고 싶을 수 있는데, 이때 webpack-bundle-analyzer를 이용하면 된다.

 

이 웹팩 번들 분석툴을 이용하면 웹팩을 통해 번들링된 파일 속을 들여다볼 수 있다. 어떤 코드들로 구성되어 있는지 히트맵 그래프로 쉽게 확인이 가능하다. 만약 CRA를 통해 리액트 프로젝트를 만들었다면 CRA에 들어있는 기본 웹팩 설정을 사용하기 때문에 아래 CRA용으로 설치를 해야 한다. 사용법은 간단하다.

CRA용 : https://www.npmjs.com/package/cra-bundle-analyzer

웹팩을 직접 구성했다면 여기로 : https://www.npmjs.com/package/webpack-bundle-analyzer

Installation

# NPM
npm install --save-dev cra-bundle-analyzer
# Yarn
yarn add -D cra-bundle-analyzer

Usage

npx cra-bundle-analyzer

 

실행 명령어를 입력해보면, 아래처럼 번들 파일 히트맵을 볼 수 있다.

보이지 않다면 좌측에 숨은 메뉴가 있으니 참고.

 

여기서 어떤 코드가 큰지, 어떤 코드가 불필요한지 감을 잡을 수 있다.

일단 메인페이지에서는 불필요한 에디터 등 lazy loading이 필요해 보이는 것들이 있으니 적용해보자.

 

 

3. Code Splitting

메인페이지에서 불필요한 에디터를 분리시켜 필요한 타이밍에 적절히 호출될 수 있도록 하는 게 목표다.

우선 리액트에서 코드 분할을 어떻게 하는지 알아려면 공식문서를 참고하자. 한글 공식문서가 잘 되어 있다.

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

리액트가 제공하는 라우터 기반으로 분리를 하면 현재 문제가 깔끔하게 해결될 수 있기때문에 적용하려고 한다. 

아래 예시를 보니 사용법이 어렵지 않다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

Suspense와 lazy를 이용한다. Suspense는 lazy loading이 없는 순간을 대체해준다.

기존의 라우터 파일을 이렇게 적용하고 나서 다시 번들 분석툴을 돌려 봤다.

chunk로 쪼개져 분할된 모습이다.

이제 다시 lighthouse의 성능 분석을 해보았다.

확실히 좋아졌다. 69점에서 시작했는데 97점까지 끌어올렸다.

1.2초나 걸리는 부분을 찾아보니 Toast UI 사이트에서 잘 번역된 내용이 있어 가져왔다.

https://ui.toast.com/posts/ko_202012101720

'Largest Contentful Paint'는 Core Web Vitals의 지표로 뷰포트에서 가장 큰 콘텐츠 엘리먼트가 나타날 때 측정한다. 페이지의 주요 내용이 화면에 렌더링이 완료되는 시기를 결정하는데 사용된다. 

이처럼 여전히 개선이 필요한 부분이 있지만 핵심적인 부분은 일차적으로 해결이 된 것 같다.

자잘한 부분 수정은 추후 진행하게 되면 아래 추가해볼까 한다.

웹 성능 개선에 가장 중요한 '이미지'와 '코드 분리' 끝.