코드 분할

21.2.1. 라우트 기반 분할

라우트 단위로 코드를 분할하여 초기 로딩에 필요한 JavaScript 크기를 최소화해야 합니다.

const routes = [
  { path: '/dashboard', component: () => import('@/pages/DashboardPage.vue') },
  { path: '/settings', component: () => import('@/pages/SettingsPage.vue') },
]

• 모든 라우트 컴포넌트는 () => import() 패턴을 사용하여 동적으로 로딩해야 합니다.
• 정적 import로 라우트 컴포넌트를 등록하는 것은 허용되지 않습니다.
• 빌드 도구가 자동으로 라우트별 청크를 생성하도록 설정해야 합니다.
• 초기 진입점(entry point)의 JavaScript 크기를 최소화하여 첫 페이지 로딩 속도를 확보해야 합니다.

---

21.2.2. 동적 import

특정 조건에서만 필요한 기능은 동적 import()를 사용하여 조건부로 로딩해야 합니다.

// 관리자 전용 기능의 조건부 로딩
async function loadAdminModule() {
  if (userStore.isAdmin) {
    const { AdminPanel } = await import('@/modules/admin')
    return AdminPanel
  }
}

• 관리자 전용, 특정 권한 전용 등 일부 사용자만 접근하는 기능은 동적 import를 적용해야 합니다.
• Vue에서는 defineAsyncComponent를 활용하여 비동기 컴포넌트를 정의할 수 있습니다.

import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
})

• 비동기 컴포넌트에는 로딩 상태 표시를 위한 loadingComponent를 지정하는 것을 권장합니다.
• delay 옵션을 설정하여 짧은 로딩 시 깜빡임을 방지하는 것을 권장합니다.

---

21.2.3. 프리로드와 프리페치

사용자가 곧 방문할 가능성이 높은 리소스를 사전에 로딩하여 체감 속도를 향상시켜야 합니다.

전략	용도	우선순위
preload	현재 페이지에서 반드시 필요한 리소스	높음
prefetch	다음 탐색에서 필요할 가능성이 있는 리소스	낮음

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="prefetch" href="/js/settings-page.chunk.js">

• 현재 라우트에서 필수적인 리소스(폰트, 주요 이미지)에는 preload를 적용해야 합니다.
• 다음 탐색 대상 라우트의 청크 파일에는 prefetch를 적용하는 것을 권장합니다.
• Vue Router의 라우트 정의에서 webpackPrefetch 또는 빌드 도구의 자동 prefetch 기능을 활용할 수 있습니다.
• 사용자 행동 기반 프리로드(예: 링크에 마우스 호버 시 해당 라우트 청크를 프리로드)를 적용하는 것을 권장합니다.

---

21.2.4. 트리 쉐이킹

사용하지 않는 코드가 빌드 결과물에 포함되지 않도록 트리 쉐이킹을 보장해야 합니다.

• 라이브러리에서 기능을 가져올 때 반드시 named import를 사용해야 합니다.

// 올바른 예
import { debounce } from 'lodash-es'

// 잘못된 예: 전체 라이브러리가 번들에 포함됩니다
import _ from 'lodash'

• package.json에 "sideEffects": false를 설정하여 번들러가 미사용 모듈을 제거할 수 있도록 해야 합니다.
• 사이드 이펙트가 있는 파일(CSS import, 전역 폴리필 등)은 sideEffects 배열에 명시해야 합니다.

{
  "sideEffects": ["*.css", "*.scss", "./src/polyfills.ts"]
}

• 라이브러리별로 트리 쉐이킹이 가능한 import 패턴을 확인하고 적용해야 합니다.