性能优化

延迟加载 Hydration

首先，让我们来看一下如何实现延迟 Hydration（hydration 延迟加载）。延迟 Hydration 是一种提示 Google 我们的脚本对于应用程序的运行并非必要的技术。通过在网站上使用这种方法，可以通过减少应用程序的“阻塞时间”（Blocking Time）来提高性能。

Nuxt 提供了一个名为 nuxt-delay-hydration 的模块，用于实现延迟 Hydration。这个模块会将一个 promise 注入到应用中，并根据模块的配置选择合适的位置。这段 promise 会在用户交互（如鼠标移动、滚动、点击等）或在设置了超时时间的空闲回调时解析。

接下来，我们安装 nuxt-delay-hydration 模块：

yarn add -D nuxt-delay-hydration

然后在 nuxt.config.ts 文件中将该模块添加到 modules 数组中进行配置：

export default defineNuxtConfig({
...
  modules: [
    'nuxt-delay-hydration',
  ],
...
});

我们可以通过 delayHydration 对象配置应用的优化。debug 选项允许我们在开发模式下加载应用并在浏览器控制台中查看 Hydration 日志。

export default defineNuxtConfig({
...
  modules: [
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    debug: process.env.NODE_ENV === 'development',
   },
});

此外，我们可以通过设置 mode 选项来指定需要的 Hydration 模式。以下是一些可用的模式选项：

init：将推迟所有脚本的加载，直到 hydration 的 promise 被解析为止。
mount：仅在 Nuxt 挂载过程中延迟。这确保了插件和某些第三方脚本能够正常运行，但会推迟布局和页面组件的渲染。

export default defineNuxtConfig({
...
  modules: [
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    debug: process.env.NODE_ENV === 'development',
    mode: 'mount' //set the mode to mount
  },
});

动态导入

我们接下来要了解的另一种技术是动态导入。动态导入本质上指的是根据需要懒加载内容。

这种方法非常适合在用户导航到某个页面时再加载该页面，或者仅在内容出现在视口中时再加载它。

在 Nuxt 3 中实现懒加载非常简单，只需要在想要懒加载的组件名称前加上 “Lazy” 前缀即可。

例如，在我们的示例中，需要懒加载 ArticleCard 组件，我们只需将其更改为 LazyArticleCard 即可。

<template>
  <main>
    <h1 class="article__heading">Hello</h1>
      <section class="article__section">
        <LazyArticleCard
          v-for="article in articles"
          :key="article.id"
          :article="article"
        />
      </section>
  </main>
</template>

partytown

Partytown 集成可以将资源密集型脚本转移到 Web Worker 中运行（Web Worker 是一种在后台运行的 JavaScript 脚本，与网页的主线程分离。这种机制允许执行更复杂的计算任务，而不会影响网页应用的 UI 响应）。这显著提高了站点的性能，因为应用可以专注于处理重要任务，比如渲染 UI 和用户交互，而不会被繁重的脚本拖慢。这将为用户带来更流畅的体验。

配置 Partytown 非常简单，几乎不需要额外的设置：

安装 @nuxtjs/partytown 模块：

yarn add --dev @nuxtjs/partytown 
# 或使用 npm
npm install --save-dev @nuxtjs/partytown

在 nuxt.config.ts 中将模块添加到 modules 配置中：

export default defineNuxtConfig({
  modules: ['@nuxtjs/partytown'],
})

在需要由 Partytown 处理的脚本中，添加 type: 'text/partytown' 属性即可：

<template>
  <div>
    <Script type="text/partytown" src="https://example.com/analytics.js" />
  </div>
</template>

完成以上步骤后，Partytown 会自动将指定的脚本移到 Web Worker 中运行，从而优化网页的性能。

vite-pwa-nuxt

另一个非常实用的工具是 vite-pwa-nuxt 模块。这个模块旨在帮助你轻松地将 Nuxt.js 应用转化为渐进式 Web 应用（PWA）。

PWA 使用代码拆分和缓存等性能优化技术，即使在较慢的网络连接上也能快速加载应用。这不仅可以提升应用性能，还能确保流畅的用户体验。

该模块为常见的 PWA 功能提供了合理的默认配置，例如自动嵌入的 Web 应用清单（web app manifest）。简单来说，Web 应用清单是一个 JSON 文件，向浏览器提供有关 Web 应用的详细信息，如应用名称、主题颜色、启动 URL 等。通过这些信息，浏览器可以为 Web 应用提供增强功能，比如显示安装提示、创建主屏幕图标或支持离线功能，这些都是 PWA 的关键特性。

有了这个模块，你几乎可以立即上手，无需任何额外配置。

安装模块：

npx nuxi@latest module add @vite-pwa/nuxt

将模块添加到 nuxt.config.ts 的 modules 配置中：

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
})

完成这些步骤后，你的 Nuxt.js 应用就可以轻松转变为支持 PWA 功能的应用。

Fontaine

Fontaine，一个可以让网页字体加载更快、显示更流畅的模块。有时候网页字体加载时间较长，会对用户体验造成不良影响。而 Fontaine 会自动生成合适的备用字体和字体度量信息（字体度量本质上是告诉浏览器如何显示字体的指令）。

设置 Fontaine 非常简单，只需要安装模块：

yarn add -D @nuxtjs/fontaine

并在 nuxt.config.ts 文件中进行配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  // 如果你使用的是 Google 字体，或者没有为所用字体声明 @font-face，
  // 可以在这里声明。
  //
  // 大多数情况下，这不是必须的。
  //
  // fontMetrics: {
  //   fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
  // },
})

Nuxt 会扫描你的 @font-face 规则，并生成包含正确度量信息的备用规则。例如：

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}
/* 生成的规则如下： */
@font-face {
  font-family: 'Roboto fallback';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
    local('Arial'), local('Noto Sans');
  ascent-override: 92.7734375%;
  descent-override: 24.4140625%;
  line-gap-override: 0%;
}

然后，当你使用 font-family: 'Roboto' 时，Nuxt 会为 font-family 添加备用字体：

:root {
  font-family: 'Roboto';
  /* 会变成： */
  font-family: 'Roboto', 'Roboto fallback';
}

请注意，@nuxtjs/fontaine 模块目前还在积极开发中。为了获得最佳性能，除了这个模块会自动生成的 @font-face 备用规则外，你需要将所有 CSS 内联到页面中，以避免布局不一致的问题。