async 컴포넌트는 어떻게 지연 로딩(lazy loading)을 가능하게 하나요?

Question

Accepted Answer

**async 컴포넌트**는 컴포넌트의 코드를 **실제로 필요할 때만** 로드하여, 별도의 번들(청크)로 분리해 필요 시 가져옵니다. 이는 사용자가 다운로드하는 초기 JavaScript를 줄입니다.

## async 컴포넌트 정의

```js
import { defineAsyncComponent } from "vue";

// 컴포넌트 코드는 처음 렌더링될 때만 다운로드됨
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // 동적 import → 별도 청크
);
```

동적 `import()`는 번들러(Vite/webpack)에게 `HeavyChart.vue`를 자체 파일로 분리하라고 알려, 컴포넌트가 처음 사용될 때 메인 번들의 일부가 아니라 지연 로드되도록 합니다.

## 성능에 중요한 이유

```text
지연 로딩 없이: main.js = 앱 + HeavyChart + Editor + Modal + ... (거대함, 첫 로드 느림)
지연 로딩 사용: main.js = 앱만; 차트를 열 때 HeavyChart.js 로드
```

크고 드물게 사용되는 컴포넌트(리치 텍스트 에디터, 차트, 모달, 관리자 패널)는 초기 다운로드에 포함될 필요가 없습니다. 이를 지연 로딩하면 초기 로드 시간과 Core Web Vitals가 개선됩니다.

## 로딩 및 에러 상태 처리

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // 청크 다운로드 중 표시
  errorComponent: ErrorDisplay,       // 다운로드 실패 시 표시
  delay: 200,                         // 스피너 표시 전 200ms 대기
  timeout: 5000,                      // 5초 후 포기
});
```

이 고급 형태는 페칭 중 스피너를, 실패 시 폴백을 표시하게 해줍니다 — 지연 로딩은 (보통 짧은) 네트워크 지연을 동반하므로 중요합니다.

## 흔한 조합: 라우트 수준 코드 분할

```js
// Vue Router — 각 라우트가 페이지 컴포넌트를 필요 시 로드
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

라우트 컴포넌트의 지연 로딩은 가장 흔하고 영향력 있는 사용입니다 — 각 페이지의 코드는 사용자가 그곳으로 이동할 때만 로드됩니다.

## 왜 중요한가

async 컴포넌트는 Vue의 **코드 분할** 메커니즘입니다 — 앱이 커질 때 초기 번들을 작게 유지하는 핵심 기법입니다.

무겁거나 라우트별 컴포넌트를 필요 시 로드함으로써(선택적 로딩/에러 UI와 함께) 사용자가 처음에 다운로드하는 JavaScript를 줄여 첫 로드를 빠르게 합니다.

특히 라우트에 적용할 때 표준적이고 영향력 큰 성능 최적화입니다.