Nuxt performance

提升 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: true,
          visibility: false,
        },
      },
    },
  },
})

NuxtLink·

混合渲染

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

混合渲染允许通过路由规则为每条路由设置不同的缓存规则，并决定服务器应如何响应给定 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 包体积。

懒加载组件·

延迟水合

在首次加载时，并不总需要水合（或使可交互）你网站的所有组件。使用延迟水合，你可以控制组件何时加载其代码，从而改善应用的交互时间指标。Nuxt 允许你通过延迟水合控制组件何时变得可交互（在 Nuxt v3.16 中加入）。

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

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

延迟水合·

Nuxt performance

内置特性

链接

混合渲染

懒加载组件

延迟水合

获取数据

Nuxt 核心模块

图片