<script setup>
import { ref, defineAsyncComponent } from 'vue';

// [핵심] 일반적인 정적 import 대신, defineAsyncComponent를 사용합니다.
// 이렇게 하면 빌드(Webpack/Vite) 시 코드가 별도의 파일(chunk)로 분리됩니다.
const AsyncHeavyChart = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
);

const showChart = ref(false);
</script>

<template>
  <div class="parent-container">
    <h2>성능 최적화: 비동기 컴포넌트</h2>
    <p>버튼을 누르기 전까지는 무거운 차트 컴포넌트를 로드하지 않습니다.</p>
    
    <button @click="showChart = true" v-if="!showChart">
      무거운 차트 컴포넌트 로드하기
    </button>
    
    <!-- v-if가 true가 되는 순간, 네트워크를 통해 HeavyChart.vue 파일을 다운로드합니다. -->
    <AsyncHeavyChart v-if="showChart" />
  </div>
</template>