빌드 최적화

16.3.1. 청크 분할 전략

대규모 의존성은 별도 청크로 분리하여 캐시 효율을 높입니다.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia'],
        ui: ['@vueuse/core'],
      },
    },
  },
},

• 프레임워크 핵심 라이브러리(vue, vue-router, pinia)는 vendor 청크로 분리합니다.
• 자주 변경되지 않는 대규모 라이브러리는 별도 청크로 분리합니다.
• 라우트 기반 코드 분할은 Vue Router의 동적 import를 활용합니다.

---

16.3.2. 빌드 분석

번들 크기를 분석할 때는 rollup-plugin-visualizer를 사용합니다.

yarn add -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
  ],
})

---

16.3.3. 빌드 검증 기준

프로덕션 빌드 후 다음 항목을 확인합니다.

항목	기준
초기 로드 JS 크기	300KB 이하 (gzip 기준)
최대 단일 청크 크기	500KB 이하
빌드 경고	0건
소스맵	프로덕션에서 비활성화

---

16.3.4. 트리 쉐이킹

• 라이브러리 import 시 사용하는 기능만 개별 import합니다.
• import * as 구문은 트리 쉐이킹을 방해하므로 사용하지 않습니다.

// 올바른 예 — 개별 import
import { ref, computed, watch } from 'vue'

// 잘못된 예 — 전체 import
import * as Vue from 'vue'