面试题：如何实现 Vue 路由的懒加载？

Vue 路由的懒加载（Lazy Loading）是一种优化技术，用于延迟加载路由对应的组件，从而减少初始加载时间，提升应用的性能。以下是实现 Vue 路由懒加载的几种方式：

1. 使用动态 `import` 语法

Vue Router 支持使用动态 import 语法实现路由懒加载。动态 import 返回一个 Promise，Webpack 会自动将懒加载的组件打包成单独的 chunk 文件。

示例：

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

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'), // 懒加载 Home 组件
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'), // 懒加载 About 组件
  },
];

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

export default router;

2. 使用 `defineAsyncComponent`（Vue 3）

在 Vue 3 中，可以使用 defineAsyncComponent 定义异步组件，结合动态 import 实现懒加载。

示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';

const Home = defineAsyncComponent(() => import('@/views/Home.vue'));
const About = defineAsyncComponent(() => import('@/views/About.vue'));

const routes = [
  {
    path: '/',
    component: Home, // 懒加载 Home 组件
  },
  {
    path: '/about',
    component: About, // 懒加载 About 组件
  },
];

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

export default router;

3. 分组打包（Webpack 的魔法注释）

通过 Webpack 的魔法注释（Magic Comments），可以将多个路由组件打包到同一个 chunk 中，减少请求次数。

示例：

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

const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "group-home" */ '@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "group-home" */ '@/views/About.vue'),
  },
  {
    path: '/contact',
    component: () => import(/* webpackChunkName: "group-other" */ '@/views/Contact.vue'),
  },
];

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

export default router;

在上面的例子中，Home.vue 和 About.vue 会被打包到同一个 chunk 文件（group-home.js），而 Contact.vue 会被打包到另一个 chunk 文件（group-other.js）。

4. 预加载（Prefetching）

通过 Webpack 的魔法注释，可以为懒加载的路由组件添加预加载功能，提升用户体验。

示例：

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

const routes = [
  {
    path: '/',
    component: () => import(/* webpackPrefetch: true */ '@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import(/* webpackPrefetch: true */ '@/views/About.vue'),
  },
];

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

export default router;

在上面的例子中，Home.vue 和 About.vue 会在浏览器空闲时预加载，从而加快后续导航的速度。

5. 结合 Suspense（Vue 3）

在 Vue 3 中，可以使用 Suspense 组件实现懒加载时的加载状态提示。

示例：

<template>
  <RouterView v-slot="{ Component }">
    <Suspense>
      <component :is="Component" />
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </RouterView>
</template>