理解nuxt中的延迟加载和水化

Question

第一个问题

当我使用 Lazy load with nuxt and 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?[=15 开头=]

第二个问题

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

Answer 1

你问题的第一部分

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

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

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

---

所以，差不多：

• 您可以 lazy 几乎所有要导入的组件，这很少是个坏主意
• 更喜欢直接在组件上应用v-if
• 如果你在父标签上应用 v-if，Nuxt 仍然可以以某种方式实现它的工作（仔细检查你的网络选项卡以确保：构建你的应用程序并检查加载的 JS v-if条件满足)

你问题的第二部分

正如 this answer. 所解释的那样，当网站上没有任何事情发生时浏览器处于空闲状态（CPU-wise）也可能对 IMO 有用。

此外，我认为 this idle 完全 不同 并且 无关 。

PS: 上次查看 Markus 的项目（vue-lazy-hydration），它与 Nuxt2 不兼容。