[번들 사이즈 최적화] 웹팩으로 생성한 번들 파일을 분석해보자(BundleAnalyzerPlugin)

1. 번들 사이즈 최적화를 해야하는 이유

프로젝트를 빌드하면 흩어져있던 코드들을 웹팩을 이용해 하나(번들)로 묶을 수 있다.

프로젝트 개발 초기에는 번들의 크기가 작아 괜찮지만,

개발이 진행될수록 번들파일이 커져서 유저들이 번들파일을 다운받기위해 기다리는 시간이 늘어나게 된다.

대기시간이 늘어나면 그만큼 사용자 이탈율도 증가한다.

따라서 적절한 방법을 통해 번들 사이즈를 줄일 필요가 있다.

2. BundleAnalyzerPlugin 적용하기

BundleAnalyzerPlugin은 웹팩으로 만든 번들 파일을 분석해주는 웹팩 플러그인이다.

설치

yarn add -D webpack-bundle-analyzer

설정

웹팩 설정

BundleAnalyzerPlugin은 웹 서버로 실행하거나 빌드할 때 기본적으로 함께 실행되므로, 옵션을 통해 매번 열리지 않게 할 것이다.

대신 script를 추가하여 원할때 플러그인을 이용할 수 있도록 설정했다.

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  ...
  plugins: [
    ...
    new BundleAnalyzerPlugin({
      analyzerMode: 'static', // 분석 결과 html 파일을 dist에 저장
      openAnalyzer: false, // 웹 서버로 실행하거나 빌드할 때 Analyzer를 열지않음
      generateStatsFile: true, // 분석 파일을 저장
      statsFilename: 'bundle-report.json', // 분석 파일(json)이름 지정
    }),
  ],
  ...
};

package.json 설정

// package.json
{
  "scripts": {
    "preanalyze": "yarn build:prod", // 프로젝트에서 사용하는 빌드 명령어를 입력하자
    "analyze": "webpack-bundle-analyzer ./dist/bundle-report.json --default-sizes gzip" // 프로젝트 설정에 따라 dist부분이 다를 수 있다.
  },
}

실행

yarn analyze

 

이제 우리는 

dist에 저장된 분석 결과 html 파일을 이용해 여러 번들을 비교할 수 있다.

번들 분석 결과 예시

3. 번들 사이즈 최적화 키워드

이제 아래 키워드들을 적용해 번들 사이즈를 줄여보자❗️ 

 

Code Spliting, lazy loading, dynamic import: 코드가 현재 화면에서 필요하지 않지만, 필요한 시점에만 로드되도록 하여 초기 번들 크기를 줄이는 기술. 예를 들어, 화면 전환이 필요할 때 해당 화면의 코드만 로드되도록 하는 방식

Tree shaking: 번들에 포함되었지만 실제로 사용되지 않는 코드(특히 불필요한 함수나 모듈)를 제거하여 번들 크기를 최적화. 흔히 ESM(ES Modules)을 지원하는 도구에서 dead code elimination으로 구현

 

즉, code splitting은 필요한 코드만 나중에 로드해 번들을 줄이고, tree shaking은 사용되지 않는 코드를 제거해 번들을 최적화하는 역할을 한다.