Vite 빌드 시 파일 크기 통계 출력해주는 플러그인

Vite 빌드 시 번들 구성과 용량 통계를 시각적으로 확인하고 싶을 때 가장 많이 사용하는 플러그인은 rollup-plugin-visualizer입니다.

이 플러그인을 사용하면 빌드 완료 후 어떤 라이브러리가 용량을 얼마나 차지하는지 트리맵(Treemap) 형태로 보여주는 HTML 리포트를 생성할 수 있습니다.

1. 설치 방법

먼저 개발 의존성으로 플러그인을 설치해야 합니다.

Bash

npm install --save-dev rollup-plugin-visualizer
# 또는
yarn add -D rollup-plugin-visualizer

2. 설정 방법 (vite.config.ts 또는 vite.config.js)

플러그인을 불러온 뒤 plugins 배열에 추가합니다.

TypeScript

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      filename: "./dist/report.html", // 리포트 파일 경로
      open: true, // 빌드 후 자동으로 브라우저에서 열기
      gzipSize: true, // gzip 압축 후 크기 표시
      brotliSize: true, // brotli 압축 후 크기 표시
    }),
  ],
});

3. 주요 특징

• 시각화: 모듈 간의 상대적 크기를 사각형 크기로 표현하여 직관적입니다.
• 다양한 템플릿: 기본값인 treemap 외에도 sunburst, network 등의 형식을 지원합니다.
• 용량 확인: statSize, parsedSize, gzipSize, brotliSize를 각각 확인할 수 있어 실제 사용자에게 전달되는 파일 크기를 파악하기 좋습니다.

기타 대안

설정 파일을 수정하지 않고 일회성으로 확인하고 싶다면 아래 명령어를 바로 실행할 수도 있습니다.

• vite-bundle-visualizer: npx vite-bundle-visualizer 명령어를 입력하면 설치 없이 즉시 번들 분석 결과를 확인할 수 있습니다.