面试题：Vue中Vue Router路由懒加载的实现方式有哪些

Question

请阐述在Vue Router中实现路由懒加载的常见方式，并给出相应代码示例。

Answer 1

常见方式及代码示例

1. 使用import()语法（ES2020动态导入）： 在Vue Router配置中，使用import()函数来实现懒加载。这样在路由被访问时才会加载对应的组件。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
})

export default router

2. 使用webpackChunkName指定代码块名称： 在import()中使用webpackChunkName注释来指定生成的代码块名称，方便代码拆分和调试。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
    }
  ]
})

export default router