DEV Community

Discussion on: Angular @defer Interactive Examples

Collapse
 
krivanek06 profile image
Eduard Krivanek Playful Programming Angular

Thanks for sharing. Deffer is a new syntax (at least for me) where I needed some time to wrap my head around it when to use it. Seems like (for me) the most appropriate places will be charts. Since charts may take some time to render, they can slow down the whole UI. I believe if you wrap them inside the @deffer block, the application should not be in the blocking state.

Collapse
 
ducin profile image
Tomasz Ducin Playful Programming Angular • Edited

@krivanek06 AFAIU your question, not necessarily. @defer block basically "cuts away" pieces (components, directives, pipes), as long as they're standalone (!) and move them away to another bundle (lazy loaded chunk).

The main point is that your initial bundle size decreases, which is super useful for your LCP.

So yeah, charts would be a good example, but NOT because they take time to load and display anything. But perhaps an entire library would have to be loaded (c3, d3, whatever) which is not needed on the initial page.

It's basically lazy loading but on TEMPLATE level, NOT routing level.

PS you can either play the recorder video demo or check it out yourself - it's the lazy chunks (devtools network tab) which is the whole point. Initial bundle is smaller 🔥