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

Question

第一个问题

当我使用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包来减少交互时间和总阻塞时间。当 (LazyHydrate when-idle) 采取行动时，我不明白浏览器何时空闲。

Answer 1

你的问题的第一部分

这是关于该主题的推文，推荐v-if有关组件本身的内容。

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

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

所以，差不多：

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

你的问题的第二部分

正如此答案所解释的，当网站上没有发生任何事情（CPU 方面）时，浏览器处于空闲状态。在我看来，这个答案也可能有用。

而且，我认为这种空闲是完全不同且无关的东西。

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