面试题：Vue组件级懒加载中，如何通过路由配置实现懒加载？

Question

在Vue项目中，假设已经搭建好基本的路由框架，描述一下如何在路由配置中实现组件级懒加载，写出关键代码示例，并解释这种实现方式的原理。

Answer 1

实现方式

在Vue项目的路由配置中，使用箭头函数和import()语法来实现组件级懒加载。

关键代码示例

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/components/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/components/About.vue')
    }
  ]
});

export default router;

原理

1. 动态导入：import()是ES2020（ES11）引入的动态导入语法，它返回一个Promise。在路由配置中使用() => import('组件路径')，这意味着在路由被访问之前，组件不会被加载。只有当该路由对应的路径被访问时，才会通过import()去加载对应的组件。
2. 代码分割：Webpack等打包工具会将使用import()导入的组件进行代码分割，生成单独的chunk文件。这样在初始加载页面时，只会加载必要的核心代码，而不是一次性加载所有组件，从而减小了初始加载的bundle体积，提高了页面的加载速度。例如，上述代码中Home.vue和About.vue会被分别打包成不同的chunk文件，当访问/home时加载Home.vue对应的chunk，访问/about时加载About.vue对应的chunk。