vue3组件懒加载怎么实现

组件懒加载是一种优化策略，它指的是在应用运行过程中，不是一次性加载所有组件，而是在实际需要使用某个组件时，才动态地加载该组件的代码。

在 Vue 3 中，可以使用以下方式实现组件的懒加载：

使用动态导入结合 defineAsyncComponent 函数：

import { defineAsyncComponent } from 'vue';

const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

<template>
     <button @click="showComplexComponent">显示复杂组件</button>
  <div v-if="showComponent">
    <ComplexComponent />
  </div>
</template>

<script lang="ts" setup name="">
  import {ref} from 'vue'
  // 定义懒加载的复杂组件
  import {defineAsyncComponent} from 'vue'
  const ComplexComponent =(defineAsyncComponent(()=>import('./ComplexComponent.vue')))
  
  const showComponent =ref(false)
  const showComplexComponent=()=>{
    showComponent.value=true
  }
</script>

<style scoped>

</style>

直接在路由配置中实现懒加载：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import UserOrderDetails from './views/UserOrderDetails.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user-order-details',
      component: () => import('./views/UserOrderDetails.vue')
    }
  ]
});

export default router;

这里使用了动态导入的方式 () => import('./views/UserOrderDetails.vue') 来加载 UserOrderDetails 组件，只有在用户访问 /user-order-details 这个路由时，才会去加载对应的组件代码，从而实现了组件的懒加载。