memoflow-frontend-performance-optimization-first-package-chunk

记录一下前端性能优化实战,dailyuse(memoflow) web 端 的 首包需要拆分的诊断

#type / howto #status / growing

[!info] related notes

  • 前置笔记:
  • 相关 MOC:

memoflow-frontend-performance-optimization-first-package-chunk

首屏加载速度

实际测试(memo 进入登录页面)

network 状况

Pasted image 20260413164706

前 8.48s 加载完前面 4 个内容后,没有后续的反应(就开始空白),持续很长事件,然后突然开始加载剩余所有内容

timing 页面

第一个 document 文件
Pasted image 20260413164724

第二个 很大的文件
Pasted image 20260413164740

第五个等待了很久的文件
Pasted image 20260413164753

performance

Pasted image 20260413164803

80s 才显示出登录页面

总结

主要存在两个问题:

  1. 主js包过大
    • 接近 1m,正常应该在 100kb 左右。
    • 下载了将近 1m。 然后登录页面才开始请求加载
  2. 网络存在问题,
    • 很多小资源也表现异常慢
    • Cloudflare HIT 但内容下载 58 秒
创建于 2026/4/13 更新于 2026/5/27