一、技术手段
可以简单分为
（一）浏览器应用层 （图片懒加载、debounce请求等）
（二）网络层 （缓存、压缩、http并发等）
（三）服务端（怎么工程化打包、ssr等）
二、评估性能的手段
主要关注点在Peformance的LCP（Largest Contentful Paint ） 和 TTI（Time to Interactive）。
首次可交互时间: domInteractive - fetchStart
白屏时间: responseEnd - fetchStart
（一）合成模拟评估
google的dev tool 有lighthouse。使用无头浏览器模拟加载。
（二）真实数据收集评估
通过自建或者第三方监控，可以发现用户具体的访问站点情况。umijs.org/docs/max/an… Umi内置了站点统计的功能，目前支持 Google Analytics 和百度统计
三、浏览器应用层面
- 图片使用懒加载web.dev/browser-lev…
- js置于body底部（监控js脚本等除外）
- css置于head标签之中
- 异步请求，使用debounce\throtle
四、umi框架的实践操作
umi框架内置了许多最佳实践，主要包括webpack打包、ahooks等，我们往往只需要微调就可以配置成功。
（1）webpack打包在umi内置的
打包提速：使用一个叫MFSU方案umijs.org/blog/mfsu-i… webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用，以免去应用热更新时对依赖的编译。适用场景：微前端开发。
一般不需要修改webpack，但是也是提供两种修改的方法：
Webpack常规优化手段：
- codesplit （SPA项目中，根据路由切割不同的包）umijs.org/docs/api/co…
- treeshaking （根据代码的包引用，不额外打包未使用的模块，需要es6支持）webpack.js.org/guides/tree…
demo: 使用rollup 演示www.ruanyifeng.com/blog/2022/0…
- Externals（使用cdn的第三方包代替打包）
- 压缩
题外话：vite基于es module的打包方案。
（2）使用Ahooks的debounce、throttle等封装好的hooks
五、其他服务端优化手段
umi没有提供SSR的功能。
简单介绍一下SSR。
服务端渲染的页面交互能力有限，如果要实现复杂交互，还是要通过引入js文件来辅助实现，我们把页面的展示内容和交互写在一起，让代码执行两次，这种方式就叫同构。
另外，ssr有build-time和run-time不同，像gatsby这样的静态网站框架就是在build-time生成的；
egg则是run-time时候生成的。
其他、支持SSR的框架NEXT VS Remix：juejin.cn/post/713041…
六、网络层
（1）静态资源，设置nginx的gzip压缩（css、js 、xml、html 文件）。
（2）图片资源，
-
可以使用tinypng网站tinypng.com/ 提前压缩；
-
小图片，使用webpack loader直接编译入css文件中
-
重复使用的小图片，使用雪碧图。
-
有交互的图片，可考虑使用svg。
（3）重要资源使用prefetch预加载、dns-prefetch解析DNS。
（4）nginx设置缓存策略
（5）使用http2代替http1.1。
这个需要公司整个链路的服务器支持，一般需要运维升级。
-
多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。浏览器ES Module依赖于HTTP2的多路复用特性。
-
新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。
-
header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
其他相关，开发冷启动、热启动、热更新的加速，优化开发体验。
