性能优化
性能优化
延迟加载 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 内联到页面中，以避免布局不一致的问题。