Vue路由懒加载与组件懒加载示例详解

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

// 静态导入：会随着主包一起加载，适合首页
import Home from '@/views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 动态导入：只有访问 /about 路径时，浏览器才会请求该组件对应的 JS 文件
    component: () => import('@/views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

<template>
  <div>
    <h1>主页面</h1>
    <button @click="showChart = true">加载并显示报表</button>
    
    <AsyncChart v-if="showChart" />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';

const showChart = ref<boolean>(false);

// 显式定义异步组件
const AsyncChart = defineAsyncComponent(() =>
  import('@/components/BigChart.vue')
);

// 高级配置（可选）：带加载状态
const AsyncComponentWithConfig = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // 加载过程中显示的组件
  errorComponent: ErrorComponent,     // 加载失败时显示的组件
  delay: 200,                         // 展示加载组件前的延迟时间
  timeout: 3000                       // 超时时间
});
</script>

export default {
  components: {
    // 定义一个异步组件
    'MyLazyComponent': () => import('./components/MyLazyComponent.vue')
  }
}