1

First question

When I'm using Lazy load with nuxt and components: true
For example

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

The v-if should be on the component in order to lazy load or it will work when parent has the condition, if it will work with the parent the component must start with Lazy?

Second question

I am using vue-lazy-hydration package in order to decrease my Time to Interactive and Total Blocking Time. When (LazyHydrate when-idle) take action I don't understand when the browser is idle.

kissu
  • 24,311
  • 11
  • 36
  • 67
nadav
  • 203
  • 1
  • 2
  • 9

1 Answers1

2

First part of your question

Here a tweet about the subject, recommending a v-if on the component itself.

To make a recap on all of the 3 cases that you do have here:

  1. this one is by far the most optimal (v-if on component + Lazy)
  2. this one is not the one recommended, meanwhile it works aswell (the component is loaded only the condition is met, you can inspect the network tab to be sure)
  3. here, the component will be loaded directly on the page (JS asked + parsed), just not mounted (worst possible case)

So, pretty much:

  • you can lazy pretty much every component that you want to import, it's rarely a bad idea
  • prefer to apply v-if directly on the component
  • if you apply the v-if on the parent tag, Nuxt can somehow still achieve to make it work (double-check your network tab to be sure: build your app and inspect the JS loaded when the v-if condition is met)

Second part of your question

A browser is idle when there is nothing happening on the website (CPU-wise) as explained by this answer. This answer may also be useful IMO.

Also, I think that this idle is something totally different and unrelated.

PS: last time I checked Markus' project (vue-lazy-hydration), it wasn't compatible with Nuxt2.

kissu
  • 24,311
  • 11
  • 36
  • 67
  • why lazy pretty much every component that you want to import is a bad idea? – nadav Dec 07 '21 at 16:35
  • and if vue-lazy-hydration not compatible with nuxt you have and suggestion how i can decrease my Time to interactive and total blocking time, ty for your help – nadav Dec 07 '21 at 16:36
  • @nadav I actually said the opposite here, `lazy` as much as you can. Only some things cannot be lazy-loaded. Mostly the ones that you need straight away. Also, if you ever have a bug related to this, you could test by eagerly loading it (with no `lazy` prefix). As of what to do to decrease some metrics, it's a broad question and it may come from a lot of things. Maybe give a look to my [previous answer](https://stackoverflow.com/a/67319935/8816585). Not directly an answer but still valid opinion. Otherwise, you could also try Nuxt3, but beware because it's still in beta. – kissu Dec 07 '21 at 16:53