블로그 서비스 최적화

이미지 사이즈 최적화

너무 과도하게 큰 이미지 렌더링, 이미지 크기를 줄이는 작업.

이미지 CDN 서버를 통해 캐싱을 통해 이미지 다운로드 하는 시간을 줄일 수 있음.
이미지 크기를 작게 함으로써 다운로드 하는 용량을 줄일 수 있음.

cdn.image.com과 같은 cdn 서비스를 이용하면 불러오는 이미지의 크기를 줄일 수 있음.

예시.

예시 상황에서는 퍼포먼스 점수가 34 -> 67

즉 불필요하게 큰 이미지를 다운로드 받지 말라는 의미입니다.

병목 코드 최적화

오랫동안 자바스크립트가 실행되었고 불필요하게 오래 걸림

개발자도구 Performance 패널에서 분석을 진행.

CPU, Network 차트, 스크린샷 등
시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 보여줍니다. 자바스크립트 사용은 노란색, 렌더링/레이아웃 작업은 보라색, 페인팅 작업은 초록색, 기타 시스템 작업은 회색으로 표시됩니다.
Network 타임라인
서비스 로드 과정에서의 네트워크 요청을 시간 순서에 따라 보여줍니다.
Frames, Timings, Main
화면의 변화가 있을 때마다 스크린샷을 찍어 보여줍니다.
Timing section
User Timing API를 통해 기록된 정보를 기록합니다. 각 컴포넌트들의 렌더링 시간을 측정해서 보여주고 있습니다. Main 섹션은 브라우저 메인 스레드에서 실행되는 작업을 플레임 차트로 보여줍니다.

선택 영역에서 발생한 작업 시간의 총합과 각 작업이 차지하는 비중을 보여줍니다.

가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여줍니다.

바텀업과 반대로 트리뷰로 보여줍니다.

이벤트 로그탭은 발생한 이벤트를 보여줍니다.

위와 같은 정보들로 퍼포먼스에 관련된 정보들을 얻을 수 있습니다.

코드 개선하기

function removeSpecialCharacter(str) {
  const removeCharacters = [
    "#",
    "_",
    "*",
   // ...
    "-",
  ];
  let _str = str;
  let i = 0,
    j = 0;

  for (i = 0; i < removeCharacters.length; i++) {
    j = 0;
    while (j < _str.length) {
      if (_str[j] === removeCharacters[i]) {
        _str = _str.substring(0, j).concat(_str.substring(j + 1));
        continue;
      }
      j++;
    }
  }

  return _str;
}

function removeSpecialCharacter(str) {
  let _str = str.substring(0, 100); // 코드를 간결하게 개선합니다.
  _str = _str.replace(/[#_*~`>=\n-]/g, ""); // 정규표현식을 이용하여 한번에 수정합니다.
  return _str;
}

코드 분할 & 지연 로딩

Performance 패널에서 번들하는데 오래걸렸던 파일이 있습니다. 해당 파일을 분석하기 위해서는 webpack bundle analyzer라는 툴을 이용하여 트리맵으로 시각화하여 볼 수 있습니다.

$ npm install --save-dev cra-bundle-analyzer

$ npx cra-bundle-analyzer

다음과 같은 html 파일이 생성이 됩니다.

해당 html 파일내에서는 번들 파일과 그 안에 있는 모든 패키지들을 보여주고 있습니다.

refractor, react-dom이 상당히 큰 부분을 기여하고 있는데 package-lock.json에서 검색을 통해 react-syntax-highlighter 패키지가 참조하고 있음을 알 수 있습니다.

refractor 모듈은 상세 페이지에서 사용하고 있으므로 초기 페이지에서 다운로드할 필요가 없습니다. 때문에 번들 파일을 페이지별로 필요한 내용만 분리하면 좋아집니다.

코드 분할이란

페이지에서 필요한 코드만 로드하는 것을 의미합니다. 불필요한 코드를 로드하지 않는다면 더욱 빨라집니다.

코드 분할을 하는 좋은 방법은 동적 import를 사용하는 것입니다.

아래와 같이 기본 import를 할 경우 빌드 시에 함께 번들링이 됩니다.

import { add } from './math';

console.log('1 + 4 =', add(1, 4));

하지만 아래와 같이 import를 사용하면 런타임에 해당 모듈을 로드합니다. 이것을 동적 import라고 합니다.

import('add').then((module) => {
   const { add } = module
   
   console.log('1 + 4 =', add(1, 4));
})

이 방식은 Promise 형태로 모듈을 반환해줍니다. 이와 같은 문제를 해결하기 위해서 리액트는 lazy와 Suspense를 함께 제공합니다.

import React. { Suspense } from 'react';

const SomeComponent = React.lazy(() => import('./SomeComponent'));

function MyComponent(){
   return (
      <div>
         <Suspense fallback={<div>Loading</div>}>
            <SomeComponent />
         </Suspense>
      </div>
   )
}

동적 import를 하는 동안 Suspense의 fallback prop에 정의된 내용으로 렌더링되고, 이후 정상적으로 SomeComponent를 렌더링합니다.

기존 4.5초에서 3.8초로 번들 속도가 단축되었다.

텍스트 압축 설정

server 명령어를 통해 애플리케이션을 실행할 경우 다음과 같은 옵션이 있습니다.

-s: 매칭되지 않는 주소는 전부 index.html로 보냅니다. -u: 텍스트와 같은 기타 파일들을 압축하지 않습니다.

u 옵션을 제거함으로써 텍스트와 같이 작은 파일들을 압축합니다.

Last modified: 08 November 2024