vue怎么实现组件懒加载

示例

<template>
  <div>
    <h1>Vue3 懒加载的组件简单示例</h1>
    <!-- 使用懒加载的组件 -->
    <button @click="showComponent = !showComponent">Toggle Lazy Loaded Component</button>
    <Suspense>
      <!-- 懒加载的组件 -->
      <template #default>
        <LazyComponent v-if="showComponent" />
      </template>
      <template #fallback>
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
  // 定义一个懒加载组件
  import { ref } from 'vue'
  import { defineAsyncComponent } from 'vue'

  const showComponent = ref(false)

  // 使用 defineAsyncComponent 进行懒加载
  const LazyComponent = defineAsyncComponent(() => import('./LazyComponent.vue'))
</script>

使用 defineAsyncComponent 来定义懒加载的组件。
import('./LazyComponent.vue') 会在需要时才加载 LazyComponent。
Suspense 标签提供了加载中的占位符（fallback），当懒加载的组件还没加载完成时，显示一个 loading 提示。
这样，当点击按钮时，懒加载的 LazyComponent 就会按需加载，提升页面加载性能。

LazyComponent.vue

<template>
  <div>
    <p>This is a lazy-loaded component!</p>
  </div>
</template>

<script setup>
  // 这里是懒加载的内容
</script>