[ JavaScript ] Bundle 사이즈 줄이기

Bundle 사이즈 줄이기

React, Vue, Angular 등의 프레임워크를 사용하면, 번들 사이즈가 커질 수 있습니다.

이를 줄이지 않으면 사용자가 느끼는 페이지 로딩 시간이 길어져 사용자 경험이 떨어질 수 있습니다.

이를 해결하기 위해, 번들 사이즈를 줄이는 방법을 알아봅니다.

Bundle 사이즈를 줄이는 방법

소스 코드 최소화 하기 : minify, uglify

• minify : 압축하기
  • 불필요한 공백, 줄바꿈, 주석 등을 제거합니다.
• uglify : 난독화하기
  • 변수명, 함수명 등을 알아보기 어렵게 변경합니다.
  • 이름을 단순화해서 불필요한 데이터를 제거하면서, 외부인이 소스 코드를 읽기 어렵게 만들어 기초적 보안을 제공합니다.

코드 스플리팅 (Code Splitting)

• React 에서는 React.lazy, Suspense 를 사용하면, 코드 스플리팅을 쉽게 구현할 수 있습니다.

import React, { Suspense } from "react";

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Tree Shaking

사용하지 않는 코드를 제거하는 기능

• 나무를 흔들면, 죽은 잎사귀만 떨어지듯이 사용하는 기능만 {} 부분적으로 import 하는 방식을 의미합니다.

Tree shaking 적용했을때 모습

실제로 프로젝트에서 사용했던 date-fns 라이브러리의 경우, Tree Shaking 을 적용하면 6배 가량의 크기를 줄일 수 있습니다.

 

import * as date from "date-fns"; // 159.6k (gzipped: 27.3k)
import { format, formatDistanceToNow } from "date-fns"; // 26.6k (gzipped: 7.2k)

 

Reference

• Tree Shaking
• 자바스크립트 번들 사이즈 줄이기