Nuxt组件懒加载规则与vue-lazy-hydration空闲水合时机咨询

第一个问题解答 #

• 不需要将v-if绑定在组件自身，只要父元素已经绑定了生效的v-if条件，仅给组件添加Lazy前缀就能实现懒加载。
• 你给出的三个示例实际表现如下：
  • 示例1：写法冗余，重复绑定v-if不会影响懒加载效果，但完全没必要额外给组件自身加条件
  • 示例2：写法正确，符合懒加载要求，父元素v-if条件成立时才会触发LazyComponent的异步资源加载
  • 示例3：无懒加载效果，没有Lazy前缀的组件会被直接打包到初始资源包中，无论父级是否有v-if都不会异步加载
• 底层逻辑：Nuxt开启components: true后，会自动将名称带Lazy前缀的组件封装为动态导入形式，只要组件第一次被渲染到DOM树中就会触发资源加载，触发渲染的v-if绑定在任意祖先节点都有效。

第二个问题解答 #

LazyHydrate的when-idle模式底层调用浏览器原生requestIdleCallbackAPI实现，空闲状态判定遵循以下规则：

• 优先等当前浏览器帧的所有高优先级任务（同步JS执行、DOM渲染、用户交互事件处理）全部执行完成后，当前帧还有剩余的空闲时间，才会触发组件水合逻辑
• 若浏览器长期处于忙碌状态无空闲时间，会触发兜底超时逻辑（默认超时时间为2000ms），超时后无论是否有空闲都会强制执行水合
• 执行水合的过程中如果有新的用户高优先级任务插入，会立即暂停水合，等下一次空闲时再继续执行，不会阻塞用户正常操作，因此可以有效优化TTI和TBT指标。

内容的提问来源于stack exchange，提问作者mr_robot