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 状况

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

第二个 很大的文件

第五个等待了很久的文件

performance

80s 才显示出登录页面
总结
主要存在两个问题:
- 主js包过大
- 接近 1m,正常应该在 100kb 左右。
- 下载了将近 1m。 然后登录页面才开始请求加载
- 网络存在问题,
- 很多小资源也表现异常慢
- Cloudflare HIT 但内容下载 58 秒