Vue面试题27：为什么要使用路由懒加载？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 这是一道应用题。当打包应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就会更加高效；

// 将
// import UserDetails from "./views/UserDetails"
// 替换为
const UserDetails = () => import("./views/UserDetails")

const router = createRouter({
  // ...
  routes: [{ path: "/user/:id", component: UserDetails }],
})

• 思路

  • 1.必要性
  • 2.何时用
  • 3.怎么用
  • 4.使用细节

• 回答范例

  • 1.当打包构建应用时，JavaScript包会变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样会更加高效，是一种优化手段；
  • 2.一般来说，对所有的路由都使用动态导入是个好主意；
  • 3.给component选项配置一个返回Promise组件的函数就可以定义懒加载路由。通常结合webpack提供的动态导入方法import使用：
    {path:'/users/:id',component:()=>import('./views/UserDetails')}
  • 4.结合注释()=>import(/*webpackChunkName:"group-user" */ './UserDetails.vue')可以做webpack代码分块；
    vite中结合rollupOptions定义分块；
  • 5.这里注意其实懒加载的写法是告诉打包器我要异步加载路由，但不是异步组件，路由中不能写异步组件，组件中使用异步组件是没问题的；

• 知其所以然

  • component（和components）配置如果接收一个返回 Promise 组件的函数，Vue Router只会在第一次进入页面时才会获取这个函数，然后使用缓存数据；