深层路由懒加载需父子组件均用动态import()，支持动态参数和通配符路由；可通过webpackChunkName聚合关联模块；对高频路径可用router.afterEach预加载。
深层路由的懒加载，核心是让嵌套路由组件也按需加载，而不是随父级一起打包。它不是只对一级路由生效，而是要覆盖到子路由、孙子路由甚至动态参数路由层级。
嵌套路由组件单独懒加载
在 children 配置中，每个子路由组件都应使用动态 import()，不能复用父组件的导入方式。父路由组件本身也必须是懒加载的，否则子组件仍可能被提前打包。
- 错误写法（子组件未懒加载）：
component: () => import('./Parent.vue')，其中Parent.vue内部静态引入了Child.vue - 正确写法（父子均懒加载）：
父路由：component: () => import('./Parent.vue')
子路由：{ path: 'settings', component: () => import('./Settings.vue') }
带参数的深层路由懒加载
动态路径如 /user/:id/profile 或通配符路由 /post/:slug* 同样支持懒加载。关键在于确保 import() 函数体内部不依赖运行时参数——它只负责返回 Promise，加载时机由 Vue Router 控制。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 可直接写：
component: () => import('./UserProfile.vue') - 不需要手动解析
$route.params，组件内部照常使用即可 - 若需根据参数差异化加载（如 PC/移动端不同组件），可在函数内加逻辑：
component: () => { return isMobile ? import('./MobileProfile.vue') : import('./DesktopProfile.vue'); }
命名 chunk 优化深层模块聚合
深层路由常存在语义关联（如用户中心下的所有子页），用相同 webpackChunkName 把它们打到一个 chunk，减少请求数量，提升二次访问速度。
立即学习“前端免费学习笔记（深入）”；
- 示例：
const UserHome = () => import(/* webpackChunkName: "user-module" */ './UserHome.vue')const UserSettings = () => import(/* webpackChunkName: "user-module" */ './UserSettings.vue')const UserBilling = () => import(/* webpackChunkName: "user-module" */ './UserBilling.vue') - Webpack 自动合并这三个组件为
user-module.[hash].js，首次访问任一子路由即加载整个模块
预加载关键深层路由
对用户高概率进入的深层路径（如登录后跳转的 /dashboard/analytics），可在导航守卫中主动触发预加载，避免点击后等待。
- 在
router.afterEach中判断目标路径：router.afterEach(to => { if (to.path.startsWith('/dashboard/')) { import('@/views/dashboard/Analytics.vue'); } }); - 注意：预加载只是发起请求并缓存，不会渲染，也不影响当前页面
