组件懒加载与异步组件

<!-- 普通加载：组件代码包含在页面 JS bundle 中 -->
<VideoPlayer :url="video.url" />
 
<!-- 懒加载：组件代码单独打包，使用时才下载 -->
<LazyVideoPlayer :url="video.url" />

// Nuxt 自动为每个组件生成两个版本：
// 1. VideoPlayer     → import VideoPlayer from '~/components/VideoPlayer.vue'
// 2. LazyVideoPlayer → defineAsyncComponent(() => import('~/components/VideoPlayer.vue'))

<template>
  <div>
    <!-- 点击按钮才加载播放器 -->
    <button @click="showPlayer = true">播放视频</button>
    <LazyVideoPlayer v-if="showPlayer" :url="video.url" />
 
    <!-- 滚动到底部才加载评论 -->
    <LazyCommentList v-if="isBottomVisible" :video-id="video.id" />
 
    <!-- Tab 切换才加载对应内容 -->
    <LazyVideoAnalytics v-if="activeTab === 'analytics'" />
  </div>
</template>

const HeavyEditor = defineAsyncComponent({
  // 加载函数
  loader: () => import('~/components/HeavyEditor.vue'),
 
  // 加载中显示
  loadingComponent: EditorSkeleton,
  delay: 200,  // 200ms 后才显示 loading（避免闪烁）
 
  // 加载失败显示
  errorComponent: EditorError,
  timeout: 10000,  // 10 秒超时
 
  // 加载失败时的钩子
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()  // 自动重试 3 次
    } else {
      fail()
    }
  },
})

<template>
  <Suspense>
    <!-- 异步组件（可以有 async setup） -->
    <HeavyDashboard />
 
    <!-- 加载中的 fallback -->
    <template #fallback>
      <DashboardSkeleton />
    </template>
  </Suspense>
</template>
 
<script setup lang="ts">
const HeavyDashboard = defineAsyncComponent(
  () => import('~/components/studio/Dashboard.vue')
)
</script>

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
    <!-- NuxtPage 自动处理页面组件的 async setup -->
    <!-- 页面切换时显示加载状态 -->
  </NuxtLayout>
</template>

<template>
  <!-- 空闲时水合（requestIdleCallback） -->
  <LazyVideoRecommendations hydrate-on-idle />
 
  <!-- 进入视口时水合（IntersectionObserver） -->
  <LazyCommentList hydrate-on-visible />
 
  <!-- 用户交互时水合（click/focus/hover） -->
  <LazyVideoPlayer hydrate-on-interaction />
 
  <!-- 媒体查询匹配时水合 -->
  <LazySidebar hydrate-on-media-query="(min-width: 768px)" />
 
  <!-- 永不水合（纯静态展示） -->
  <LazyStaticBanner :hydrate="false" />
</template>

<!-- app/pages/videos/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: video } = await useFetch(`/api/videos/${route.params.id}`)
 
const showPlayer = ref(false)
</script>
 
<template>
  <div class="max-w-6xl mx-auto">
    <!-- 视频封面 / 播放器区域 -->
    <div class="aspect-video bg-black rounded-xl overflow-hidden">
      <template v-if="showPlayer">
        <LazyVideoPlayer
          :url="video.url"
          :poster="video.thumbnail"
          @ended="showPlayer = false"
        />
      </template>
      <template v-else>
        <!-- 点击封面开始播放（此时才加载播放器组件） -->
        <div
          class="relative w-full h-full cursor-pointer group"
          @click="showPlayer = true"
        >
          <img :src="video.thumbnail" :alt="video.title" class="w-full h-full object-cover" />
          <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition">
            <PlayIcon class="w-16 h-16 text-white" />
          </div>
        </div>
      </template>
    </div>
 
    <!-- 视频信息（立即渲染） -->
    <VideoInfo :video="video" />
 
    <!-- 相关推荐（空闲时水合） -->
    <LazyVideoRecommendations
      :video-id="video.id"
      hydrate-on-idle
    />
 
    <!-- 评论区（进入视口时水合 + 懒加载） -->
    <LazyCommentSection
      :video-id="video.id"
      hydrate-on-visible
    />
  </div>
</template>

<!-- app/components/video/PlayerSkeleton.vue -->
<template>
  <div class="aspect-video bg-gray-200 dark:bg-gray-800 rounded-xl animate-pulse flex items-center justify-center">
    <div class="w-16 h-16 rounded-full bg-gray-300 dark:bg-gray-700" />
  </div>
</template>

<!-- app/components/CommentSkeleton.vue -->
<template>
  <div class="space-y-4">
    <div v-for="i in 3" :key="i" class="flex gap-3 animate-pulse">
      <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 shrink-0" />
      <div class="flex-1 space-y-2">
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4" />
        <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
        <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
      </div>
    </div>
  </div>
</template>

// app/components/video/Player.client.vue 的高级加载配置
const VideoPlayer = defineAsyncComponent({
  loader: () => import('~/components/video/Player.client.vue'),
  loadingComponent: () => import('~/components/video/PlayerSkeleton.vue'),
  delay: 100,
  timeout: 15000,
  onError(error, retry, fail, attempts) {
    // 网络错误时重试
    if (error.message.includes('fetch') && attempts <= 3) {
      retry()
      return
    }
    fail()
  },
})