Nuxt 性能

提升 Nuxt 应用性能的最佳实践。

Nuxt 提供了内置功能来提升你的应用性能并有助于改善 Core Web Vitals。此外，Nuxt 团队也维护了多个核心模块，用于在特定领域进一步提升性能。本指南概述了优化 Nuxt 应用性能的最佳实践。

内置功能

Nuxt 提供了若干内置功能，帮助你优化网站性能。理解这些功能的工作方式对于实现极快的性能至关重要。

链接

<NuxtLink> 是对 Vue Router 的 <RouterLink> 组件和 HTML <a> 标签的替换组件。它会智能判断链接是内部链接还是外部链接，并据此使用可用的优化（预取、默认属性等）渲染。

<template>
  <NuxtLink to="/about">About page</NuxtLink>
</template>

<!-- Which will render to with Vue Router & Smart Prefetching -->
<a href="/about">About page</a>

Nuxt 会自动包含智能预取。这意味着它会检测链接何时可见（默认情况下），无论是在视口内还是在滚动时，并预取那些页面的 JavaScript，这样在用户点击链接时页面已经准备就绪。

你也可以选择在交互时进行预取：

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetchOn: 'interaction',
      },
    },
  },
})

混合渲染

在更复杂的应用中，我们可能需要对应用的渲染方式进行完全控制，以支持某些页面在构建时生成，而另一些页面则应在客户端渲染的场景。

混合渲染允许为每个路由使用路由规则设定不同的缓存策略，并决定服务器应如何响应给定 URL 的新请求：

export default defineNuxtConfig({
  routeRules: {
    '/': {
      prerender: true,
    },
    '/products/**': {
      swr: 3600,
    },
    '/blog': {
      isr: 3600,
    },
    '/admin/**': {
      ssr: false,
    },
  },
})

Nuxt 服务端将自动注册相应的中间件，并使用 Nitro 缓存层将路由包装为带缓存处理程序的路由。

懒加载组件

要动态导入组件（也称为懒加载组件），只需在组件名称前添加 Lazy 前缀即可。如果该组件并非始终需要，这会很有用。

<script setup lang="ts">
const show = ref(false)
</script>

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

通过使用 Lazy 前缀，你可以延迟在合适的时刻加载组件代码，这有助于优化 JavaScript 包的大小。

延迟水合

并不总是需要在初始加载时对站点的所有组件进行水合（或使其可交互）。使用延迟水合，你可以控制组件何时加载其代码，这可以改善应用的可交互时间（time-to-interactive）。Nuxt 允许你使用延迟水合来控制组件何时变为可交互（在 Nuxt v3.16 中加入）。

<template>
  <div>
    <LazyMyComponent hydrate-on-visible />
  </div>
</template>

为了优化应用，你可能希望将某些组件的水合延迟到它们可见时，或浏览器完成更重要任务之后再进行。

数据获取

为避免重复获取相同数据（在服务端和客户端各获取一次），Nuxt 提供了 useFetch 和 useAsyncData。它们会确保如果在服务端进行了 API 调用，数据会在载荷中转发到客户端，而不是再次被获取。

Nuxt 核心模块

除了 Nuxt 的内置功能外，Nuxt 团队维护的核心模块还能进一步提升性能。这些模块帮助处理图像、自定义字体或第三方脚本等资源。

图像

未经优化的图像会对网站性能产生显著负面影响，特别是对 Largest Contentful Paint (LCP) 分数。

在 Nuxt 中我们可以使用 Nuxt Image 模块，它是面向 Nuxt 应用的即插即用图像优化方案。它允许使用内置优化器或你喜欢的图像 CDN 来调整大小和转换图像。

<NuxtImg> 是对原生 <img> 标签的替代，具备以下增强功能：

使用内置提供器优化本地和远程图像
将 src 转换为提供器优化的 URL，使用现代格式如 WebP 或 Avif
根据 width 和 height 自动调整图像大小
在提供 sizes 选项时生成响应式 sizes
支持原生 lazy loading 以及其他 <img> 属性

你网站中的图像通常可以按重要性区分；那些需要在初始加载时优先交付（即 Largest Contentful Paint）的图像，以及可以稍后或在需要时加载的图像。为此，我们可以使用如下优化：

<template>
  <!-- 🚨 Needs to be loaded ASAP -->
  <NuxtImg
    src="/hero-banner.jpg"
    format="webp"
    preload
    loading="eager"
    fetch-priority="high"
    width="200"
    height="100"
  />

  <!-- 🐌 Can be loaded later -->
  <NuxtImg
    src="/facebook-logo.jpg"
    format="webp"
    loading="lazy"
    fetch-priority="low"
    width="200"
    height="100"
  />
</template>

字体

Nuxt Fonts 会自动优化你的字体（包括自定义字体）并移除外部网络请求，以提升隐私性和性能。

它包含对任意字体文件的内置自动自托管，这意味着你可以以更优的方式加载网页字体并减少布局偏移，得益于底层包 fontaine。

Nuxt Fonts 会处理你的所有 CSS，并在遇到 font-family 声明时自动执行以下操作：

解析字体 – 在 public/ 中寻找字体文件，然后检查 Google、Bunny、Fontshare 等网络提供者。
生成 @font-face 规则 – 注入用于从正确来源加载字体的 CSS 规则。
代理与缓存字体 – 将 URL 重写为 /_fonts，下载并在本地缓存字体。
创建回退度量 – 调整本地系统字体以匹配网络字体，减少布局偏移（CLS）。
将字体包含在构建中 – 将字体与项目打包，哈希文件名并设置长期缓存头。

它支持多种提供者，设计为可插拔和可扩展，因此无论你的设置如何，都应该能够使用现有提供者或编写你自己的提供者。

脚本

第三方资源如分析工具、视频嵌入、地图和社交媒体集成可以增强网站功能，但也可能显著降低用户体验，并对 Interaction to Next Paint (INP) 和 Largest Contentful Paint (LCP) 分数产生负面影响。

Nuxt Scripts 让你以更好的性能、隐私、安全性和开发者体验来加载第三方脚本。

Nuxt Scripts 在第三方脚本之上提供了一个抽象层，提供 SSR 支持和类型安全，同时仍然让你对脚本的加载方式拥有底层控制。

const { onLoaded, proxy } = useScriptGoogleAnalytics(
  {
    id: 'G-1234567',
    scriptOptions: {
      trigger: 'manual',
    },
  },
)
// queue events to be sent when ga loads
proxy.gtag('config', 'UA-123456789-1')
// or wait until ga is loaded
onLoaded((gtag) => {
  // script loaded
})