nuxt-delay-hydration

状态: 稳定版 v2 v0 ✅ , v3 main ✅ 感谢我的 赞助计划 💖 关注我 @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

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

基准测试

• Pokemon
• 国家
• 手动

实时示例

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

鸣谢

• Markus Oberlehner. Vue 中懒水合的先驱

赞助商

许可证

MIT 许可证 © 2022 - 至今 Harlan Wilton