perf(路由预加载): 修复静态 import 导致入口文件膨胀问题
问题: - 原实现使用静态 import() 映射表 - Rollup 静态分析时将所有 37 个视图组件引用打包进 index.js - 导致首次加载时需要解析大量未使用的 import 语句 修复: - 移除静态 import() 映射,改用纯路径字符串邻接表 - 通过 router.getRoutes() 动态获取组件的 import 函数 - 延迟初始化 routePrefetch,首次导航时才创建实例 - 更新测试文件使用 mock router 效果: - index.js 中动态 import 引用从 37 个减少到 1 个 - 首次加载不再包含未使用的视图组件引用 - 41 个测试全部通过 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -330,7 +330,8 @@ let authInitialized = false
|
||||
|
||||
// 初始化导航加载状态和预加载
|
||||
const navigationLoading = useNavigationLoadingState()
|
||||
const routePrefetch = useRoutePrefetch()
|
||||
// 延迟初始化预加载,传入 router 实例
|
||||
let routePrefetch: ReturnType<typeof useRoutePrefetch> | null = null
|
||||
|
||||
router.beforeEach((to, _from, next) => {
|
||||
// 开始导航加载状态
|
||||
@@ -414,6 +415,10 @@ router.afterEach((to) => {
|
||||
// 结束导航加载状态
|
||||
navigationLoading.endNavigation()
|
||||
|
||||
// 懒初始化预加载(首次导航时创建,传入 router 实例)
|
||||
if (!routePrefetch) {
|
||||
routePrefetch = useRoutePrefetch(router)
|
||||
}
|
||||
// 触发路由预加载(在浏览器空闲时执行)
|
||||
routePrefetch.triggerPrefetch(to)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user