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

在 Vue Router 中，懒加载是一种优化技术，用于延迟加载路由组件，从而减少初始加载时间，提升应用性能。实现懒加载的方式主要有以下几种：

1. 使用 `import()` 动态导入

Vue Router 支持通过 import() 语法实现懒加载。import() 是 ES6 的动态导入语法，返回一个 Promise，可以在路由配置中使用。

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

2. 使用 `require.ensure`（适用于 Webpack）

在 Webpack 中，可以使用 require.ensure 来实现懒加载。这种方式适用于旧版 Webpack，但在现代开发中更推荐使用 import()。

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: resolve => require.ensure([], () => resolve(require('./views/About.vue')), 'about')
    }
  ]
});

3. 使用 `@babel/plugin-syntax-dynamic-import`

如果你使用的是 Babel，可以通过 @babel/plugin-syntax-dynamic-import 插件来支持动态导入语法。

首先安装插件：

npm install --save-dev @babel/plugin-syntax-dynamic-import

然后在 .babelrc 或 babel.config.js 中配置插件：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

之后就可以在代码中使用 import() 语法了。

4. 使用 `Vue.lazy`（Vue 3）

在 Vue 3 中，可以使用 defineAsyncComponent 来实现懒加载。

import { defineAsyncComponent } from 'vue';

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: defineAsyncComponent(() => import('./views/About.vue'))
    }
  ]
});

5. 分组懒加载

如果你有多个路由需要懒加载，并且希望将它们打包到同一个 chunk 中，可以使用 Webpack 的魔法注释 /* webpackChunkName: "group-name" */ 来指定 chunk 名称。

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