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