Vue 并行请求优化 LCP 和 FCP

大家好，这里是大家的林语冰。

在 Web 开发中，快速加载的网站分秒必争。LCP（最大内容绘制）和FCP（首次内容绘制）这两个关键性能指标对于出色的 UX（用户体验）和优化搜索引擎跑分至关重要。本文聚焦于 Vue（一个人气爆棚的 JS 框架），以及如何使用 Vue 诉诸并行请求组件文件和图像来优化 LCP 和 FCP。

我们将探讨这些指标的战略意义，了解 Vue 的异步组件，并解决传统加载方法的挑战。读完本文后，您将拥有实现并行请求、优化 Vue App 的 LCP 和 FCP，以及提供更快、更具吸引力的 UX 的工具。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请临幸 Vue.js Parallel Fetching improves LCP and FCP。

并行请求获得最佳速度

FCP 缓慢的主要原因之一是组件 JS 文件和数据的顺序加载。通过利用 Vue 和 beforeEnter 钩子，我们可以并行化请求过程。让我们按部就班：

异步组件加载

在此栗子中，我们使用 beforeEnter 钩子异步请求产品数据，如下所示：

js 复制代码

beforeEnter: async (to, from, next) => {
  // 并行请求数据和组件
  fetchProductDataParallel(to)
  // 无需等待即可继续路由导航（它会开始请求组件文件）
  next()
}

这里，fetchProductDataParallel 是一个优化并行请求的函数。它允许组件 JS 文件和数据请求并行实现，减少网页的加载时间。

js 复制代码

// fetchProductDataParallel 的实现如下
async function fetchProductDataParallel(to) {
  const response = await fetch(`https://dummyjson.com/products/${to.params.id}`)
  const product = await response.json()
  // 等待根 App 被创建
  await store.state.rootAppCreatedPromise
  // 尽早开始加载图像
  const image = new Image()
  image.src = product.images[0]
  // 把产品设置导 Vuex/Pinia
  store.commit('SET_PRODUCT_DATA', product)
}

这允许组件 JS 文件和数据请求并行发生，减少网页的加载时间。

数据驱动图像加载

基于用户交互或屏幕位置加载图像，优化 UX 和性能。从数据中请求图像 URL 并尽早开始加载，如下所示：

js 复制代码

const image = new Image()
image.src = product.images[0]

通过与其他资源并行加载图像，可以防止它们成为加载过程中的性能瓶颈。

对 Web 性能的影响

下面是按顺序请求数据和资源的传统组件的屏幕截图。（您可以在此处测量指标 mkiselyow.github.io/performance...

这是一个优化组件的屏幕截图，该组件利用并行请求数据和资源，显着优化了 Web 性能。（mkiselyow.github.io/performance...

通过践行这些策略，您将见证网站 LCP 和 FCP 指标的显着优化。数据、组件和图像加载过程同时发生，带来更快、响应更灵敏的 UX。

完结撒花

优化 LCP 和 FCP 对于确保良好的 UX 和提高网站 SEO 跑分至关重要。诉诸 Vue 异步路由组件以及请求组件文件、数据和图像的并行化，您可以实现迅雷不及掩耳的 Web 性能。践行这些技术，使用性能测试工具衡量您的结果，并观察用户满意度的飙升。

通过遵循这些最佳实践，您可以维护一个高性能的 Web App，让您的用户保持参与并反馈更多内容。

您现在收看的是《前端翻译计划》，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~