核心逻辑优先加载、非关键功能延后或按需触发是提升用户体验最直接有效的方式；需依功能重要性分级，结合框架特性（vue/react）、魔法注释、状态协调及ssr服务端配合实现。
核心逻辑优先加载，非关键功能延后或按需触发，是提升用户体验最直接有效的方式。加载顺序不是靠代码书写先后决定的，而是由调用时机、依赖关系和加载策略共同控制。
按功能重要性划分加载优先级
把用户进入页面后立刻需要交互的部分设为高优先级，比如主表单、数据列表、核心操作按钮；把辅助类功能（如分享弹窗、埋点组件、彩蛋动效）设为低优先级。
- Vue 中对高优先级组件使用 defineAsyncComponent({ loader, suspensible: false })，避免被 Suspense 暂停阻塞渲染
- React 中将关键异步组件放在顶层 lazy() 调用，非关键组件包裹在独立的 Suspense fallback 内
- 极低频模块（如「导出 PDF」）完全不预加载，等用户点击后再执行 import('./ExportPDF.vue')
用魔法注释控制资源加载节奏
Webpack/Vite 的 import() 注释语法能精准干预 chunk 加载行为，比纯 JS 控制更底层、更可靠。
- import(/* webpackPreload: true */ './MainForm.vue')：与当前导航并行加载，适合首屏必需组件（Vite 5+ 默认启用）
- import(/* webpackPrefetch: true */ './HeavyChart.vue')：空闲时预取，适合用户大概率后续会访问的模块
- 慎用 Prefetch，它会占用带宽，可能挤占主资源下载，反而拖慢首屏
用状态协调存在依赖的组件
当多个异步组件有逻辑先后（例如 A 渲染完才允许加载 B），不能只靠 import 顺序，需引入轻量协调机制。
- 定义响应式标志位，如 isCoreLoaded = ref(false)，在核心组件 onMounted 后置为 true
- 次要组件用 v-if="isCoreLoaded" 或 useEffect(() => { if (isCoreLoaded) loadExtra() }, [isCoreLoaded]) 控制触发时机
- 对向导类或多步骤表单，可封装 createSequentialLoader 工具函数，按序 resolve 组件数组
服务端配合确保 SSR 首屏不降级
SSR 场景下，异步组件默认会被降级为客户端加载，导致首屏空白或闪烁。必须服务端介入才能真正实现核心优先。
- Vue SSR：调用 renderToString(app, { modules: [...] }) 显式传入已解析的核心组件模块列表
- 确保服务端渲染时，关键组件内容已内联输出，而非留白等待客户端 hydrate
- 非关键组件仍走客户端异步加载，保持包体积可控
