延迟水合 · Nuxt 模块

nuxt-delay-hydration

状态： 稳定版 v2 v0 ✅ ，v3 主分支 ✅
_{感谢我的赞助计划 💖 支持。
关注我 @harlan_zw 🐦}

⚠️ 这是一种“技巧”，可以欺骗 Google Lighthouse 认为您的网站比实际速度更快。

它应该只用于渐进增强型网站。
它可能不会提供任何真正的性能或 SEO 优势（使用 CrUX 进行测试，而不是 Google Lighthouse）。

特性

🔥 减少网站的“阻塞时间”
🚦 使用路由规则进行页面级配置
🔁 （可选）重播预水合点击

为什么要延迟水合？

延迟水合是一种技术，用于提示 Google 我们的脚本对于我们的应用程序功能不是必需的。

通过延迟水合，我们可以通过减少“阻塞时间”指标来提高 Google Lighthouse 分数。

以前您可能使用过 vue-lazy-hydration，它效果很好。但是，这只是提供 Google 提示的一种更冗长的方式，就像我们使用此模块所做的那样。

什么是渐进增强型应用？

渐进增强型应用程序是在没有 JavaScript 的情况下设计为可以工作的应用程序，然后通过 JavaScript 逐步增强。

使用您的网站不需要您的脚本，这就是我们通过延迟水合来提示 Google 的内容。

为此，您可以确保

在初始响应中提供完整的 HTML
脚本不会触发 CLS
避免使用脚本设置图像，这会影响 LCP

此模块的工作原理

一个 Promise 被注入到您的应用程序中，其位置基于模式。只要以下事件之一触发，该 Promise 就会被解析

交互事件（鼠标移动、滚动、点击等）
具有固定超时的空闲回调

空闲 CPU 时间提示 Google 这些脚本对于您的应用程序运行不是必需的。

例如

如果 Google 机器人访问页面并且没有交互，默认情况下，水合将不会发生，直到浏览器空闲回调 + 6 秒
如果用户访问页面并移动鼠标光标或滚动，则会立即触发水合。与非水合应用程序交互的机会将降到最低

请记住，这是一种权宜之计。在 Google 能够识别渐进式脚本增强之前，我们将需要依赖这种方法。

安装

如果您使用的是 Nuxt 2.x，请按照 v0 分支上的文档进行操作。⚠️ Nuxt 2 已弃用，将不再获得支持。

npx nuxi@latest module add delay-hydration

要求：渐进增强型 SSR 或 SSG Nuxt 应用程序。

用法

// nuxt.config.ts
export default {
  modules: [
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    // NOTE: you should disable this once you've finished testing, it will break HMR
    debug: process.env.NODE_ENV === 'development'
  }
}

注意：除非您启用了调试，否则模块在开发环境中不会运行。

选择模式

默认情况下，未选择任何模式，您需要选择希望模块如何工作。

类型： init | mount| manual | false

默认值： false

类型	描述	使用场景
`false` 默认值	禁用模块	测试
init	延迟所有脚本加载。	零或最少的插件/模块。
mount 推荐	在 Nuxt 挂载时延迟。插件和一些第三方脚本将可以工作。	最少的非关键插件和第三方插件。
manual	延迟由 `DelayHydration` 组件提供。	所有其他应用程序

无论您选择哪种模式，请阅读进一步优化。

Init 模式

此模式延迟所有脚本加载，直到水合 Promise 解析。

它通过挂接到 HTML 渲染，删除所有脚本标签并在水合 Promise 解析后将它们添加回来来实现这一点。

这将提供最大的速度提升，但风险也最大。

优点：提供最大的阻塞时间减少

缺点：如果您有关键的第三方脚本，则存在风险

基准测试：减少约 90-100%

export default {
  delayHydration: {
    mode: 'init'
  }
}

Mount 模式

此模式在 Nuxt 挂载时延迟。插件和一些第三方脚本将可以工作。

这将延迟您的布局和页面组件。

优点：更安全，并且仍然提供良好的改进

缺点：如果布局依赖于 js，则可能会破坏某些布局。

基准测试：减少约 70%

export default {
  delayHydration: {
    mode: 'mount'
  }
}

Manual 模式

使用手动模式，您可以手动指定要延迟应用程序的哪个部分。当您需要页面的一部分始终立即水合时（例如导航抽屉）很有用。

优点：最安全的方式进行优化

缺点：速度提升取决于用法

export default {
  delayHydration: {
    mode: 'manual'
  }
}

DelayHydration 组件

设置模式后，您需要使用该组件。

<template>
  <div>
    <DelayHydration>
      <div>
        <LazyMyExpensiveComponent />
      </div>
    </DelayHydration>
  </div>
</template>

指南

页面级配置

您可以使用路由规则在页面级配置模块。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // delay the home page
    '/': { delayHydration: 'mount' },
    // disable the module for the admin
    '/admin/': { delayHydration: false }
  }
})

您也可以在页面级使用 defineRouteRules 定义它们。

调试

调试模式

建议您在将模块部署到生产环境之前，对应用程序进行彻底的测试。

为了确保模块按预期工作，有一个 debug 模式，启用后它将在控制台中记录行为。

在本地环境中始终进行调试可能是个好主意，在这种情况下，您可以执行以下操作

export default defineNuxtConfig({
  delayHydration: {
    debug: process.env.NODE_ENV === 'development',
  },
})

可视化水合状态

如果应用程序非常静态，有时不清楚它是否已被水合，这会使调试变得困难。

为了简化操作，有一个组件 HydrationStatus 可以告诉您发生了什么。

<template>
  <div>
    <MyHeader />
    <DelayHydration>
      <div>
        <!-- Show the hydration status, only for debugging -->
        <HydrationStatus />
        <main>
          <nuxt />
        </main>
        <my-footer />
      </div>
    </DelayHydration>
  </div>
</template>

性能审计

使用我的审计工具：https://unlighthouse.dev/

重播水合点击

这是什么以及如何启用

延迟水合的问题之一是，用户交互事件可能在脚本加载之前发生，导致用户必须多次点击某些内容才能达到预期效果。想想一个使用 Javascript 触发的汉堡包，如果您的应用程序未水合，则点击它将不会有任何作用。

解决此问题的最佳方法是以无需 Javascript 即可交互的方式编写您的 HTML。

但是，在某些情况下，您需要使用 Javascript，并且对第一次点击做出响应非常重要。在这些情况下，您可以启用点击的重播。

export default defineNuxtConfig({
  delayHydration: {
    replayClick: true
  },
})

这是一个实验性配置，您应该在将其实施到生产应用程序中之前自行测试此选项。

进一步优化

异步加载重量级组件

当您同步加载重量级组件时，javascript 将与主应用程序负载捆绑在一起。

这将降低所有性能指标。建议您对这些组件使用异步导入。

运行 nuxi analyze 以查找大型组件。加载时，在它们前面加上 Lazy。

高级配置

配置应在 Nuxt 配置中的 delayHydration 键上提供。

如果您发现实验室或现场数据性能不佳，您可能需要调整此高级配置。

过滤路由

注意：建议使用路由规则而不是这些过滤选项。

使用 include 和 exclude 选项，您可以指定要延迟其水合的路由。

// nuxt.config.ts
export default defineNuxtConfig({
  delayHydration: {
    include: [
      '/blog/**',
    ],
    exclude: [
      '/admin/**'
    ],
  },
})