Vue Router 结合 keep-alive 可优化懒加载体验：懒加载减少首屏体积，keep-alive 避免重复销毁重建；需显式设置组件 name 以支持 include 匹配，并将数据请求等逻辑移至 activated 钩子。
Vue Router 结合缓存组件优化懒加载体验，关键在于两件事：一是让组件按需加载（减少首屏体积），二是避免重复加载和销毁重建（提升切换流畅度）。两者不冲突，反而互补——懒加载解决“要不要下载”，keep-alive解决“要不要重渲染”。
用 keep-alive 缓存已加载的懒加载组件
路由组件一旦通过 () => import('./X.vue') 懒加载成功，就会被 Vue 实例化。但默认情况下，每次离开再进入该路由，组件都会被销毁、重新创建、重新请求数据。加上 keep-alive 后，组件实例保留在内存中，状态（如表单输入、滚动位置、局部 data）得以保留。
- 在根组件（如 App.vue）中包裹
<router-view>：
<keep-alive>
<router-view />
</keep-alive>
- 若只想缓存部分路由（比如首页、用户页），可在路由配置中加
meta.keepAlive: true，再配合include动态控制：
<keep-alive :include="cachedViews">
<router-view />
</keep-alive>
立即学习“前端免费学习笔记（深入）”；
其中 cachedViews 是一个响应式数组，例如：['Home', 'UserList']，对应组件的 name 选项（务必为每个懒加载组件显式设置 name）。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
注意懒加载组件的 name 必须明确
keep-alive 的 include 和 exclude 匹配依赖组件的 name 字符串。而动态 import 加载的组件，如果不手动指定 name，其 name 可能为空或为默认值（如 “AsyncComponent”），导致缓存失效。
- 正确写法（在组件文件中）：
export default {
name: 'UserProfile', // 必须有
data() { return { ... } },
...
}
- 路由配置中无需改动，仍保持懒加载写法：
const routes = [
{ path: '/user/:id', component: () => import('./UserProfile.vue') }
]
处理缓存组件的生命周期与数据更新
被 keep-alive 缓存的组件不会触发 created 或 mounted，再次进入时只触发 activated 钩子；离开时触发 deactivated。这对懒加载组件特别实用：
- 把接口请求、定时器启动等逻辑从
mounted移到activated中，确保每次“激活”都刷新最新数据； - 在
deactivated中清理定时器、取消未完成的请求，防止内存泄漏； - 如果某次需要强制刷新（比如用户下拉刷新），可结合
key强制重建组件：<router-view :key="$route.fullPath" />（慎用，会绕过缓存）。
按组分块 + 缓存，进一步提升一致性
当多个相关路由（如订单列表、订单详情、订单编辑）属于同一业务模块，可将它们打包进同一个异步 chunk，并统一缓存：
- 路由配置中使用
webpackChunkName注释：
const OrderList = () => import(/* webpackChunkName: "order-module" */ './OrderList.vue')
const OrderDetail = () => import(/* webpackChunkName: "order-module" */ './OrderDetail.vue')
- 这样 Webpack 会把这两个组件打到同一个 chunk 文件里，首次访问任一路由时，另一个组件的代码也已加载完毕，切换时无网络等待；
- 再配合 keep-alive，整个模块的交互就变得非常顺滑——无白屏、无重复请求、状态不丢失。
