地图第一次进来慢的问题二

页面进来会很慢

分析选择基地后的跳转与首屏加载流程,定位导致变慢的原因。

判定瓶颈:apiSelectFarm 与首跳目标页的懒加载 chunk 串行;enteringSystem 在 finally 才关闭,若 then 中有 await 会延长遮罩。将并行预取目标页组件、在接口成功后立即关闭遮罩,并不再 await 路由完成。

原因(简要)

  1. apiSelectFarm 网络耗时:必须等接口成功才能进业务页,这段时间不可避免。
  2. 首屏懒加载:默认跳进 /device-management/uav-management,对应 index.vue 是大 chunk,往往在接口返回之后才开始下载、解析,和接口串在一起体感就特别慢。
  3. 全屏「正在进入系统」遮罩:原先在 finally 里才关遮罩;若路由解析/组件加载偏慢,会感觉整页被挡很久(即便部分阶段主要是下载 JS)。

已做优化(BaseSelection.vue)

  1. prefetchDefaultSystemEntry()

    • 进入基地选择页后,用 requestIdleCallback(无则用 setTimeout) 在空闲时预拉默认落地页的 chunk。
    • 点「进入」时再调一次,与 apiSelectFarm 并行,尽量在等接口时就把 JS 拉完。
  2. 遮罩提前关

    • 接口 code === 200 后立刻 enteringSystem = false,再 router.push/replace。
    • 路由和子组件仍在后台加载,但不再用全屏骨架挡住操作;finally 里仍会关一次,保证失败路径也会关掉遮罩。

若仍慢,多半是 apiSelectFarm 本身慢 或 redirect 去别的路径(当前预取的是无人机管理页)。需要的话可以再针对 redirect 做路径→预取映射,或让后端压缩该接口耗时。

总结成一句话

「可以了」的原因:用 import() 预取 把最重的 JS 下载 和 apiSelectFarm 叠在一起跑,并把 全屏遮罩 在发起路由前就关掉,避免把「等 chunk」也算进「系统正在进入」的主观等待里。

这不是让接口变快,而是 少排队、少被遮罩放大等待感,所以体感会明显好一截。

相关推荐
计算机魔术师2 分钟前
AI证伪了数学家信了几十年的假设,但物理那道题只答了一半
前端
vipxieliang3 分钟前
JavaScript 深浅拷贝全解析:从 JSON 到 structuredClone
前端·javascript
jerrywus5 分钟前
DeepSeek Harness 和 Pi Agent 怎么选?先想想你愿意折腾什么
前端·agent·deepseek
货拉拉技术12 分钟前
一句话叫车:货拉拉小程序 AI 叫车实战
前端·agent·ai编程
yunyi17 分钟前
给桌面客户端做下载加速:从「桶直接公开」到「边缘优先、源站兜底」的三代演进
前端·后端
world781122622 分钟前
【C++】set 和 map
java·前端·c++·set·map
程序猿乐锅25 分钟前
Streamlit 实现 AI 聊天 Agent:角色提示词、流式输出与会话管理
开发语言·前端·笔记·后端·python·学习
niucloud-admin28 分钟前
NIUCLOUD PHP SAAS上门家政使用文档:客户报表
前端·人工智能·ai编程
漫步人生走在路上32 分钟前
外贸B2B行业GEO优化白皮书:从0到1完整落地流程
前端·人工智能·搜索引擎·chatgpt·twitter
程序猿乐锅1 小时前
面向对象练习:图书借阅系统里的封装、抽象类与多态
开发语言·前端·数据库·后端·python·学习·1024程序员节