全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步「开始优化」部分直接查看优化手段

背景

前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。

在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M...

在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内

在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~

优化效果

Slow3G条件下22-25s加载完成

关于性能优化

在开始之前，我们需要明白一个原则：性能优化的最终目的是提升用户体验。
简而言之就是让用户感觉这个网站很「快」（至少不慢hh），这里的「快」有两种，一种是「真的快」一种是「觉得快」

• 「真的快」：可以客观衡量的指标，像网页访问时间、交互响应时间、跳转页面时间
• 「觉得快」：用户主观感知的性能，通过视觉引导等手段转移用户对等待时间的关注

做好这两方面都能提升用户对网站的性能评价。

权衡取舍

另外就是软件工程没有银弹，一种优化方案可能适用于大多数项目，但是某些特殊情况下很可能会起反效果。

举个，由于浏览器有单域名下并发请求限制，通常我们会将依赖统一打成一个vendor包（vue-cli默认策略），减少首屏请求数，且依赖不变动的情况下文件指纹不变，可以有效利用304缓存。在依赖不多的情况这么处理确实有助于提升加载速度，但一旦依赖多起来，vendor就会特别的大，在弱网条件下，会严重拖慢页面显示。这显然不是我们想要的，所以我们根据情况会对vendor进行拆分，比如拆分到CDN，或者直接拆分到页面中

因此，我们在做性能优化过程中，必须根据最终能给用户体验带来的提升权衡后做出适合当前项目的选择

指标和目标

目标会影响我们在过程中的决策
指标则用来度量我们的目标

目标

首先我们需要确定目标，根据场景和项目复杂度不同，制定的目标也不同，比如希望比竞品快20%，或者符合标准的"2-5-10"原则等等

这里我定下的目标是

• 正常网速下，2s内加载完成
• 弱网下，30s内加载完成

指标

关于指标这块，简单介绍下常见指标

• FCP（First