We’ve covered how to use @defer
to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different trigger options as well as the ability to create custom triggers with when
.
Yet there’s more to uncover with the prefetch
option:
The above code would display my-component
when the user interacts with the web page, but it would prefetch the code on idle
, meaning as soon as the browser isn’t busy doing anything else. That way, when the user starts interacting with the page, the component has already been downloaded (or is currently downloading) from the server, which speeds things up.
The nice thing about prefetch is that it supports the same triggers (idle
, viewport
, interaction
, hover
, immediate
, timer
) as the @defer
block, which allows for lots of different possible customizations.