[Svelte 시리즈 18편] 성능, 코드 스플리팅, 로딩 전략

실시간 기능이 늘어나면 첫 화면 속도가 느려질 수 있습니다. 이번 글에서는 필요한 코드만 불러오고, 데이터도 필요한 순간에만 요청하는 방법을 살펴봅니다.

이번 글에서 새로 나오는 용어

1. 코드 스플리팅: 번들을 여러 덩어리로 나눠 필요한 페이지가 열릴 때만 다운로드하게 만드는 최적화입니다.
2. 프리패치: 사용자가 곧 클릭할 링크를 미리 감지해 데이터나 코드를 준비해 두는 기능입니다.
3. 지연 로딩: 무거운 컴포넌트·이미지를 실제로 필요할 때만 가져와 초기 로딩을 가볍게 만드는 전략입니다.
4. browser 변수: SvelteKit이 현재 코드가 브라우저에서 실행 중인지 알려주는 값으로, 클라이언트 전용 컴포넌트를 조건부로 렌더링할 때 씁니다.

개념

코드 스플리팅(code splitting, 번들 나누기)은 번들을 여러 조각으로 나눠 필요한 라우트에서만 가져오는 전략입니다. 프리패치(prefetch, 미리 받기)는 사용자가 링크에 마우스를 올리거나 화면에 보이기 전에 데이터를 받아 두는 기능입니다. 지연 로딩(lazy loading, 늦춰 불러오기)은 특정 컴포넌트나 자산을 사용자가 요청할 때만 불러와 초기 JS 크기를 줄이는 방식입니다.

프레임워크 규칙 미리 알기

• import()는 브라우저에서만 실행됩니다. 서버 전용 파일에서는 동적 임포트를 써도 번들을 쪼개지지 않으니, 반드시 .svelte 컴포넌트 안에서 호출하세요.
• sveltekit:prefetch는 <a> 태그에만 붙습니다. 버튼에 붙여도 동작하지 않으니, 버튼을 링크로 바꾸거나 on:mouseenter 핸들러에서 prefetchRoutes를 호출해야 합니다.
• browser 변수는 SvelteKit이 제공하는 전역 상수로, import { browser } from '$app/environment';처럼 명시적으로 불러와야 합니다. 그냥 쓰면 ReferenceError가 납니다.

코드

동적 임포트와 프리패치 예제를 함께 봅니다.

<script>
  let AdminPanelPromise;
  async function loadAdminPanel() {
    AdminPanelPromise = import('$lib/components/AdminPanel.svelte');
  }
</script>

{#if AdminPanelPromise}
  {#await AdminPanelPromise}
    <p>관리자 UI 불러오는 중…</p>
  {:then Module}
    <Module.default />
  {/await}
{:else}
  <button on:click={loadAdminPanel}>관리자 도구 열기</button>
{/if}

<a sveltekit:prefetch href="/reports">보고서</a>

필요할 때만 관리자 패널을 가져오고, 보고서 링크는 뷰포트에 들어오면 자동으로 데이터를 준비합니다.

이미지나 그래프처럼 무거운 자산은 지연 로딩합니다.

{#if browser}
  <LazyChart {data} />
{:else}
  <ChartSkeleton />
{/if}

<picture>
  <source srcset={heroWebp} type="image/webp" />
  <img src={heroJpg} alt="학습 현황" loading="lazy" decoding="async" />
</picture>

왜 중요한가

학교 네트워크처럼 속도가 들쭉날쭉한 환경에서는 초기 화면이 빨리 떠야 사용자가 이탈하지 않습니다. 코드 스플리팅과 프리패치는 네트워크 상황이 나빠도 핵심 화면을 먼저 보여 주는 안전장치가 됩니다.

실습

• 따라 하기: 동적 임포트 버튼과 sveltekit:prefetch 링크를 만들고 DevTools에서 네트워크 요청 변화를 확인한다.
• 확장하기: 이미지에 loading="lazy"를 적용하거나 browser 조건으로 차트 컴포넌트를 지연 로딩한다.
• 디버깅: 번들이 줄지 않으면 import() 경로와 라우트 그룹 구조를 다시 확인한다.
• 완료 기준: 관리자 패널이 요청될 때만 다운로드되고, 프리패치된 링크는 즉시 데이터를 보여 준다.

마무리

성능 최적화는 작은 변화가 모여 큰 차이를 만듭니다. 다음 편에서는 배포와 환경 변수 설정을 다뤄 실제 서비스 운영을 준비합니다.