目的

1.本系列目的在于对当前项目做综合性能优化，重点在于优化方式，及实际使用表现！ 请结合实际需求优化自己的项目！！！

2.测试主流性能优化对项目的影响

3.性能测试分支为 FB-test-git

4.文档（自己总结的性能优化方案)juejin.cn/post/705109…

5.地址hcbeep.beep.local.shub.us:3100/ordering/?t…

6.注意 最终效果需要在测试环境和线上跑

0、 先展示一下 优化后效果

1、先使用 3种工具跑一下性能 （主要以 lighthouse 为主）

1、 WebPageTest 评估网站性能

1、打开站点 https://www.webpagetest.org/
2、简单配置一下 
3、start test 
4、拿到结果 需要注意 几个重要的指标 
复制代码

• 后面跑， 这个跑起来比较慢
  2、 Lighthouse 评估网站性能
  

1、使用 在线版本 貌似更加准确 https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect
2、关心主要的指标 
3、给出的建议 是有效的 需要结合实际去 尝试一下
复制代码

• 此处使用 lighthouse 插件 更加方便
  
• 此处结果为 多次 平均结果 后续会有更好的优化结果 此处供参考
  

3、使用 Chrome DevTools(最常用工具) 评估网站性能

1、先拿到 测试的项目 
2、npm i 安装依赖 然后启动项目 先看 network 部分 
3、再看 performance 
复制代码

本节只是 一个 初步的 判断和 跑分，我们将继续 进行优化 ！