Nuxt 性能

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

Nuxt 内置了多项功能，旨在提升应用性能并优化核心网页指标（Core Web Vitals）。此外，还有多个 Nuxt 核心模块专注于特定方面的性能提升。本指南概述了优化 Nuxt 应用性能的最佳实践。

内置功能

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

链接

<NuxtLink> 是 Vue Router 的 <RouterLink> 组件和 HTML <a> 标签的替代品。它智能判断链接是内部链接还是外部链接，并根据情况进行渲染，利用可用的优化（预获取、默认属性等）。

<template>
  <NuxtLink to="/about">关于页面</NuxtLink>
</template>

<!-- Vue Router 和智能预获取渲染为 -->
<a href="/about">关于页面</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>山脉</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">显示列表</button>
  </div>
</template>

使用 Lazy 前缀可以推迟组件代码的加载时机，有助于优化 JavaScript 包体积。

延迟水合

并非所有组件都需要在初始加载时水合（使其交互）。使用延迟水合，你可以控制组件代码的加载时机，从而提升应用的交互时间指标。Nuxt 允许通过延迟水合控制组件何时变为交互式（该功能新增于 Nuxt v3.16）。

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

为优化应用，你可能希望延迟部分组件的水合，直到它们进入视口或浏览器完成更重要任务时。

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

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

通常，网站中的图像可分为重要图片（需在初始加载时优先交付，影响 Largest Contentful Paint）和可延迟或按需加载的图片。针对这两类图像，可以采用如下优化：

<template>
  <!-- 🚨 需尽快加载 -->
  <NuxtImg
    src="/hero-banner.jpg"
    format="webp"
    preload
    loading="eager"
    fetch-priority="high"
    width="200"
    height="100"
  />

  <!-- 🐌 可稍候加载 -->
  <NuxtImg
    src="/facebook-logo.jpg"
    format="webp"
    loading="lazy"
    fetch-priority="low"
    width="200"
    height="100"
  />
</template>

字体

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

它内置自动自托管字体文件功能，依赖底层库 fontaine，可优化加载网页字体并减少布局偏移。

Nuxt Fonts 会处理所有 CSS，自动完成以下操作：

解析字体 — 先查找 public/ 目录，再查询 Google、Bunny、Fontshare 等网络字体提供商。
生成 @font-face 规则 — 注入正确来源的 CSS 规则加载字体。
代理和缓存字体 — 重写为 /_fonts 路径，将字体下载并本地缓存。
创建回退度量 — 调整本地系统字体以匹配网页字体，减少布局偏移（CLS）。
将字体包含进构建 — 随项目打包字体，文件名加哈希并设定长效缓存头。

它支持多种可插拔和可扩展的字体提供商，无论你的配置如何，都能使用已有的提供商或自行编写。

脚本

第三方资源如分析工具、视频嵌入、地图和社交媒体集成功能虽提升网站功能，但可能显著降低用户体验，进而影响下次交互绘制时间（INP）和最大内容绘制（LCP）指标。

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

Nuxt Scripts 对第三方脚本提供抽象层，支持 SSR 和类型安全，同时允许你完全控制脚本加载方式。

const { onLoaded, proxy } = useScriptGoogleAnalytics(
  { 
    id: 'G-1234567',
    scriptOptions: {
      trigger: 'manual',
    },
  },
)
// 在 ga 加载前排队事件
proxy.gtag('config', 'UA-123456789-1')
// 或等待 ga 加载完成
onLoaded((gtag) => {
  // 脚本加载完成
})