了解 nuxt 中的延迟加载和水合作用

Question

第一个问题

当我将 Lazy load 与 nuxt 和 components: true 一起使用时
例如

<div v-if="condition"> <!-- 1 -->
  <LazyComponent v-if="condition"/>
</div>
<div v-if="condition"> <!-- 2 -->
  <LazyComponent/>
</div>
<div v-if="condition"> <!-- 3 -->
  <Component/>
</div>

v-if 应该在组件上才能延迟加载，否则它会在父级有条件时工作，如果它与父级一起工作，则组件必须以Lazy开头？

第二个问题

我正在使用vue-lazy-hydration 包来减少我的互动时间和 总阻塞时间。 When (LazyHydrate when-idle) 采取行动我不明白浏览器何时处于空闲状态。

Answer 1

问题的第一部分

这里a tweet关于主题，在组件本身上推荐v-if。

回顾一下您在这里遇到的所有 3 个案例：

1. 这是迄今为止最优化的（v-if on component + Lazy）
2. 这个不是推荐的，同时它也能正常工作（组件只有满足条件才会加载，你可以检查网络选项卡确定）
3. 这里，组件会直接加载到页面上（JS问+解析），只是没有挂载（最坏的情况）

---

所以，差不多：

• 您可以lazy 几乎所有要导入的组件，这不是一个坏主意
• 更喜欢直接在组件上应用v-if
• 如果您在父标签上应用v-if，Nuxt 仍然可以以某种方式使其工作（仔细检查您的网络选项卡以确保：构建您的应用并检查在v-if 条件为时加载的JS遇见）

问题的第二部分

如this answer 所述，当网站上没有任何事情发生（CPU 方面）时，浏览器处于空闲状态。 This answer 也可能对 IMO 有用。

另外，我认为this idle 是完全不同且不相关的东西。

PS：上次我检查了 Markus 的项目（vue-lazy-hydration），它与 Nuxt2 不兼容。