面试题：Vue项目中使用路由懒加载的常见方式有哪些

Question

在Vue项目里，路由懒加载可以有效提升首屏加载性能。请阐述在Vue Router中实现路由懒加载的常见写法，并说明这种方式是如何实现按需加载组件的。

Answer 1

常见写法

1. 使用 import() 语法：

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

2. 结合 Webpack 的 require.ensure（较旧，Webpack 2+ 逐渐被 import() 取代）：

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

按需加载组件的原理

1. import() 语法：
   • 现代 JavaScript 支持的动态导入语法。当路由被访问时，import() 会返回一个 Promise。
   • 浏览器或打包工具（如 Webpack）会识别这种动态导入，将对应的组件代码分割成单独的文件（通常是一个 JavaScript 模块）。
   • 只有当路由匹配，需要渲染该组件时，才会通过网络请求加载这个单独的组件文件，实现按需加载，从而避免在首屏加载时就加载所有组件，提升首屏加载性能。
2. require.ensure：
   • Webpack 特有的代码分割语法。require.ensure 会将指定的依赖模块（这里是组件）分离成一个单独的 chunk。
   • 当路由匹配到对应的路径时，Webpack 会异步加载这个 chunk，然后执行回调函数，将组件实例化并渲染，同样实现了按需加载组件的效果，减少首屏加载时的代码体积。