持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
前言
小伙伴们好,这是村长《Vue经典面试题源码级详解》系列文章第28题,前面已完成题目合集在此: 历时一个月,2.6W字!50+Vue经典面试题源码级详解,你值得收藏!
学习群
我组织了一个面试学习群,关注村长公众号村长学前端
,回复“加群”,大家一起卷~
相关学习资源
本系列有配套视频
,思维导图
和开源项目
,大家学习同时千万不要忘了三连
+ 关注
+ 分享
,有道是喝水不忘挖井人~
- 视频教程:56道经典Vue面试题详解
- 思维导图:Vue面试专题
- 配套代码:vue-interview
怎么实现路由懒加载呢?
分析
这是一道应用题。当打包应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就会更加高效。
// 将
// import UserDetails from './views/UserDetails'
// 替换为
const UserDetails = () => import('./views/UserDetails')
const router = createRouter({
// ...
routes: [{ path: '/users/:id', component: UserDetails }],
})
复制代码
参考router.vuejs.org/zh/guide/ad…
思路
- 必要性
- 何时用
- 怎么用
- 使用细节
回答范例
-
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样会更加高效,是一种优化手段。
-
一般来说,对所有的路由都使用动态导入是个好主意。
-
给
component
选项配置一个返回 Promise 组件的函数就可以定义懒加载路由。例如:{ path: '/users/:id', component: () => import('./views/UserDetails') }
-
结合注释
() => import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
可以做webpack代码分块vite中结合rollupOptions定义分块
-
路由中不能使用异步组件
知其所以然
component
(和 components
) 配置如果接收一个返回 Promise 组件的函数,Vue Router 只会在第一次进入页面时才会获取这个函数,然后使用缓存数据。
写在最后
时间有限,就跟小伙伴们分享到这里吧,如有考虑不周,欢迎大家在评论区补充!