번들 분석 — SvelteKit 앱의 번들 크기 최적화

번들 크기가 100KB 줄면 LCP가 수백 밀리초 개선될 수 있습니다 — 측정부터 시작합니다.

개념 정의

번들 분석 은 빌드된 JavaScript 번들의 구성을 시각화하고, 불필요하게 큰 의존성이나 중복 코드를 찾아 최적화하는 과정입니다.

분석 도구 설정

BASH

npm install -D rollup-plugin-visualizer

JAVASCRIPT

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    sveltekit(),
    visualizer({
      emitFile: true,
      filename: 'stats.html',
      gzipSize: true,
    }),
  ],
});

BASH

npm run build
# stats.html 파일을 브라우저에서 열면 트리맵 시각화

코드 스플리팅

SvelteKit은 라우트별로 자동으로 코드 스플리팅합니다.

PLAINTEXT

/            → _page-abc.js (홈 전용 코드)
/blog        → _page-def.js (블로그 전용 코드)
/dashboard   → _page-ghi.js (대시보드 전용 코드)

공통 코드    → _layout-xyz.js (공유 레이아웃)

동적 import로 지연 로딩

SVELTE

<script>
  let showChart = $state(false);
  let ChartComponent = $state(null);

  async function loadChart() {
    // 클릭할 때만 chart 라이브러리 로드
    const module = await import('./Chart.svelte');
    ChartComponent = module.default;
    showChart = true;
  }
</script>

<button onclick={loadChart}>차트 보기</button>

{#if showChart && ChartComponent}
  <svelte:component this={ChartComponent} />
{/if}

의존성 최적화 팁

JAVASCRIPT

// 나쁜 예 — 전체 lodash 번들 포함 (~70KB)
import _ from 'lodash';
_.debounce(fn, 300);

// 좋은 예 — 필요한 함수만 import (~1KB)
import debounce from 'lodash-es/debounce';
debounce(fn, 300);

// 더 좋은 예 — 직접 구현
function debounce(fn, ms) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), ms);
  };
}

Tree Shaking 확인

JAVASCRIPT

// Vite 빌드 로그에서 확인
// npm run build -- --debug

// 또는 source-map-explorer로 분석
npm install -D source-map-explorer
npx source-map-explorer .svelte-kit/output/client/_app/**/*.js

이미지 최적화

SVELTE

<script>
  import { enhanced_image } from '@sveltejs/enhanced-img';
</script>

<!-- 자동 포맷 변환 및 리사이징 -->
<enhanced:img src="./hero.jpg" alt="히어로 이미지" />

면접 포인트

"코드 스플리팅은 왜 중요한가요?": 사용자가 방문하지 않는 페이지의 코드를 다운로드하지 않아 초기 로딩 속도가 빨라집니다. SvelteKit은 라우트별 자동 스플리팅을 제공합니다.
"Tree Shaking이란?": 사용하지 않는 코드를 빌드 시 제거하는 기법입니다. ES Module의 정적 구조를 분석하여 dead code를 식별합니다. import *보다 named import를 사용하면 Tree Shaking이 더 잘 동작합니다.

정리

번들 최적화는 "측정 → 분석 → 최적화 → 재측정"의 반복입니다. visualizer로 병목을 찾고, 동적 import로 지연 로딩하고, 불필요한 의존성을 제거하면 됩니다. SvelteKit은 자동 코드 스플리팅을 기본 제공하므로 좋은 출발점에서 시작합니다.