前端性能优化

性能指标(白屏/首屏/关键内容展现)
分析(Chrome/埋点)
优化(资源/缓存/网络/体验)

性能指标

FCP

LCP

产品的关键路径

自行埋点

如何分析性能

Performance Lighthouse

全链路埋点

分析过后，希望能够得到一个加载的流程图，标明每个步骤的用时

然后就可以针对性地解决用时长的那些步骤

一些常见的用时长的步骤：

• 静态资源加载&解析执行
• 图片的加载
• 接口调用

常见的性能优化手段

减小资源体积

js/css资源

• 分包，提取公共代码
• 异步（动态）组件，非首屏需要的代码不加载
• babel的精细化配置，仿vue-cli的modern mode

分析工具：
webpack analyze plugin

图片资源

• 图片压缩
  • 上传时压缩
  • 与设计达成图片体积限制共识
• 图片转webp格式
  • 对于固定的代码如webp检测，如何自动注入？
  • postcss，自动生成对应的css？

更好地利用缓存

• 合理分包，划分出“经常改动的代码”“基本不会变的代码”，配合contenthash和资源的ETag，实现每次部署后只有改动的那些代码对应的文件变了，而其他文件都还可以用缓存的
• 基于DLL实现依赖共享，如vue等基础框架包 团队公共sdk包等
  • 如何合理拆分DLL
  • 如何进行DLL的版本控制
• 客户端的离线包机制

网络层

• preconnect
• gzip压缩
• http2

让用户“觉得快”

• 把Loading放在html模板中
  • 如何避免手写html模板？如何维护跨端项目的两份代码？
• 加载完首屏之后对其他可能用到的资源进行预加载，包括图片/js/css等
  • 配合异步组件，如何自动化这个过程？

这部分如何衡量收益