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