task-10(壳层/路由): 实现页面级异步组件加载边界

lazy-config 暴露 loading 延迟/超时/文案与懒加载判定;lazy-page 用
defineAsyncComponent 提供 loading/error 组件,router 对所有注册路由统一包裹;
main.css 增加 .page-loading/.page-error 兜底样式。
This commit is contained in:
2026-09-05 12:22:52 +08:00
parent ab7255a55b
commit f1fa5f7adf
5 changed files with 180 additions and 2 deletions
@@ -0,0 +1,23 @@
import { defineAsyncComponent, h, type Component } from 'vue'
import {
PAGE_LOADING_DELAY,
PAGE_LOADING_TEXT,
PAGE_LOADING_TIMEOUT,
PAGE_LOAD_ERROR_TEXT,
} from './lazy-config'
type PageLoader = () => Promise<{ default: unknown }>
/**
* 页面级异步加载边界(任务 10):按路由分包页面,加载中/失败都有明确反馈,
* 不把 chunk 加载错误静默吞掉。
*/
export function defineLazyPage(loader: PageLoader): Component {
return defineAsyncComponent({
loader: () => loader().then((mod) => mod.default as Component),
delay: PAGE_LOADING_DELAY,
timeout: PAGE_LOADING_TIMEOUT,
loadingComponent: () => h('div', { class: 'page-loading' }, PAGE_LOADING_TEXT),
errorComponent: () => h('div', { class: 'page-error' }, PAGE_LOAD_ERROR_TEXT),
})
}