nuxt-delay-hydration

状态： 稳定版 v2 v0 ✅ , v3 主分支 ✅ 感谢我的 赞助计划 💖 关注我 @harlan_zw 🐦

⚠️ 这是一个“技巧”，旨在让 Google Lighthouse 认为您的网站比实际速度更快。

• 它只应在渐进式增强网站中使用。
• 它可能不会提供任何实际的性能或 SEO 优势（请使用 CrUX 进行测试，而不是 Google Lighthouse）。

功能

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

安装

如果您使用的是 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

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

初始化模式

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

它通过钩住 HTML 渲染，移除所有脚本标签并在水合 Promise 被解析后重新添加它们来实现此目的。

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

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

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

基准： 约 90-100% 减少

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

挂载模式

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

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

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

缺点： 如果某些布局依赖于 JS，仍然可能导致它们崩溃。

基准： 约 70% 减少

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

手动模式

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

优点： 最安全的优化方式

缺点： 速度提升取决于使用情况

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 在页面级别定义它们。

调试

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

<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/

重播水合点击

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

进一步优化

高级配置

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

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

过滤路由

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

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

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

您可以提供一个类似于路由规则的 glob 模式或一个正则表达式。

事件水合

hydrateOnEvents

• 类型： string[]
• 默认值： [ 'mousemove', 'scroll', 'keydown', 'click', 'touchstart', 'wheel' ]

控制哪些浏览器事件应触发水合作用恢复。默认情况下，它相当激进，以避免可能的用户体验问题。

replayClick

• 类型：boolean
• 默认值：false

如果水合作用的触发器是点击，您可以重播它。重播它将在您的应用程序被水合后重新执行该事件。

例如，如果用户点击了一个汉堡图标，并且需要水合作用才能打开菜单，那么在水合完成后它会重播点击。

⚠️ 这是实验性的，请谨慎使用。

空闲水合

idleCallbackTimeout

• 类型： number (毫秒)
• 默认值： 7000

在等待空闲回调时，可以定义一个最长等待时间（毫秒）。当发生大量网络请求时，这很有用。

postIdleTimeout

• 类型： { mobile: number, desktop: number } (毫秒)
• 默认值： { mobile: 5000, desktop: 4000, }

在空闲回调之后需要等待多长时间（以毫秒为单位）才能恢复水合作用。这个额外的超时是必要的，以避免标准的“阻塞”，我们需要向 Lighthouse 提供真正的空闲时间。

移动设备的时间应始终高于桌面设备，因为移动设备的 CPU 容量通常会比桌面设备低得多。

注意：默认值未来可能会根据进一步的基准测试进行调整。

调试

调试

• 类型：boolean
• 默认值：false

在控制台中记录水合作用何时被阻塞以及何时何地解除阻塞的详细信息。

基准

• 宝可梦
• 国家
• 手动

实时示例

• https://www.odysseytraveller.com/
• https://massivemonster.co/

鸣谢

• Markus Oberlehner. Vue 中延迟水合作用的先驱

赞助商

许可证

MIT 许可证 © 2022 - 至今 Harlan Wilton