Vue 성능 최적화는 번들 크기, 렌더링 효율, 반응성 비용에 걸쳐 있습니다. 다음은 가장 영향력 있는 기법들입니다.
1. 코드 분할 / 지연 로딩
js
// 라우트와 무거운 컴포넌트를 지연 로딩 → 더 작은 초기 번들
const routes = [{ path: "/admin", : () }];
= ( ());
Vue 성능 최적화는 번들 크기, 렌더링 효율, 반응성 비용에 걸쳐 있습니다. 다음은 가장 영향력 있는 기법들입니다.
// 라우트와 무거운 컴포넌트를 지연 로딩 → 더 작은 초기 번들
const routes = [{ path: "/admin", : () }];
= ( ());
가장 큰 초기 로드 이득: 사용자가 아직 필요하지 않은 코드를 보내지 마세요.
<div v-show="tab === 'a'"> <!-- 자주 토글됨 → 저렴한 CSS 전환 -->
<div v-if="rarelyShown"> <!-- 거의 렌더링 안 됨 → 구축 건너뜀 -->
<li v-for="item in items" :key="item.id"> <!-- 효율적인 DOM 재사용/diffing 가능 -->
import { shallowRef, shallowReactive } from "vue";
// 통째로 교체하는 큰 객체(또는 서드파티 인스턴스)는 깊은 추적 생략
const bigData = shallowRef(hugeObject); // .value 재할당만 반응형
Object.freeze(staticConfig); // 변하지 않는 데이터 → 반응성 오버헤드 없음
거대한 객체에 대한 깊은 반응성은 비용이 큽니다. shallowRef/shallowReactive/Object.freeze는 추적이 필요 없는 데이터의 추적을 피합니다.
<p>{{ expensiveComputed }}</p> <!-- 캐시됨, 의존성 변경 시에만 재계산 -->
<header v-once>{{ siteName }}</header> <!-- 한 번 렌더링, 절대 업데이트 안 함 -->
<div v-memo="[item.id]">...</div> <!-- item.id가 변경될 때만 리렌더 -->
10,000개 행 렌더링은 성능을 망침 → vue-virtual-scroller / TanStack Virtual을 사용해
보이는 행만 렌더링하세요.
Vue DevTools (컴포넌트 렌더 타이밍, 컴포넌트가 왜 리렌더됐는지)
빌드 출력 / rollup-plugin-visualizer → 번들 구성
Lighthouse → Core Web Vitals
Vue는 기본적으로 빠르지만, 큰 앱은 의도적인 최적화가 필요합니다: 번들 축소를 위한 지연 로딩, v-if/v-show의 올바른 선택, 안정적인 key 사용, 큰 데이터에 대한 과도한 반응성 회피(shallowRef/freeze), computed/v-memo로 캐싱, 긴 리스트 가상화.
어떤 기법이 어떤 병목을 다루는지 알고, 추측 대신 DevTools/Lighthouse로 측정하는 것이 성장하는 Vue 앱을 반응성 있게 유지하는 방법입니다.