性能优化的理解

Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。在本节中，我们将讨论用 Vue 开发的应用在性能方面该注意些什么。

区分一下 web 应用性能的两个主要方面：

• 页面加载性能：首次访问时，应用展示出内容与达到可交互状态的速度。这通常会用 Google 所定义的一系列 Web 指标https://web.dev/vitals/#core-web-vitals (Web Vitals) 来进行衡量，如最大内容绘制https://web.dev/lcp/ (Largest Contentful Paint，缩写为 LCP) 和首次输入延迟https://web.dev/fid/ (First Input Delay，缩写为 FID)。

• 更新性能：应用响应用户输入更新的速度。比如当用户在搜索框中输入时结果列表的更新速度，或者用户在一个单页面应用 (SPA) 中点击链接跳转页面时的切换速度。

虽然最理想的情况是将两者都最大化，但是不同的前端架构往往会影响到在这些方面是否能达到更理想的性能。此外，你所构建的应用的类型极大地影响了你在性能方面应该优先考虑的问题。因此，优化性能的第一步是为你的应用类型确定合适的架构：

• 查看使用 Vue 的多种方式https://cn.vuejs.org/guide/extras/ways-of-using-vue.html这一章看看如何用不同的方式围绕 Vue 组织架构。

• Jason Miller 在 Application Holotypeshttps://jasonformat.com/application-holotypes/ 一文中讨论了 Web 应用的类型以及它们各自的理想实现/交付方式。

---

分析选项

为了提高性能，我们首先需要知道如何衡量它。在这方面，有一些很棒的工具可以提供帮助：

用于生产部署的负载性能分析：