[MUSIC PLAYING] JESSICA JANIUK: Let me just
move this placeholder out of the way. And now that I'm
in your viewport, let's talk about native
Angular deferred loading. Also, hi. I'm Jessica Janiuk, a
Senior Software Engineer on the Angular Framework Team. Angular has supported
native deferred loading of individual routes
for some time now. And this is a great way to
reduce your initial bundle size. However, if you've wanted to
optimize your initial load and initial bundle
size even further, your options have been limited. Defer loading
individual components has not been an ergonomic
experience and required advanced skills and a
significant amount of code to make possible. We opened an RFC, a Request
For Comment, with our vision for deferred loading. And you all loved it. Since then, we've been hard at
work building this new feature. And we're proud to say that
as of v17, the new defer block is available as
a developer preview. That's right. You don't have to wait anymore
to see this promise resolved. Let's take a quick look
at how you can make use of this in your applications. Defer works in your
components template and allows you to separate
out chunks of content that you'd like to
be deferred loaded. Here's an example
of a component where we have a few large
components referenced in a section of your
template that we'd like to load later
so that they're not part of the initial bundle. Using Angular's new block
syntax for templates, we'll add a new defer block
around the area of the content we'd like to defer load. And don't worry. It's nonblocking. Each defer block
requires a condition or trigger to specify exactly
when deferred loading happens. You can use these triggers
with the new on clause. Let's load the large component
when a specific element enters the viewport. Defer on viewport will trigger
the fetching of your content once the provided element
reference enters the viewport. Angular provides several
built-in triggers for you to use in your applications. These include idle to load as
soon as your browser reports it's in an idle state,
interaction to load whenever something is clicked on,
focused, or similar behavior, viewport to load when the
content enters the client's viewport window, hover to load
when the mouse is hovering over an area, timer to load
after a specific timeout, and immediate to
defer load right away after the defer
block is rendered. You can use one of these
triggers with an on clause. Here's an example. We're going to go with
defer on viewport. What if one of the
built-in triggers doesn't provide the
functionality you need? Well, you can create
a custom trigger. You can use the new when clause
to provide whatever condition works for your application. In this example, once the
when condition becomes true, the deferred loading
is triggered. You can also mix and match to
provide the exact conditions you're looking for. This affords you the
perfect flexibility for your application. What if you'd like to
prefetch your dependencies? Well, defer has your back. Just add prefetch on using
one of the already mentioned triggers. Or similarly, you can
provide a custom condition using prefetch when. And your deferred dependencies
will be prefetched. That's not all we
have for you, though. The new defer blocks also
offer several additional areas for you to provide
content that will show in various phases
of your defer loading. For example, perhaps you
want to show a placeholder before your deferred
content loads. You can add that
to the @placeholder section of the defer block. Maybe you'd like
to show a loading spinner while the content
is actively being fetched. You can do that too with
the @loading section. I'm sure your spinner
will be very fetching. For both of these, you can
specify a minimum amount of time these
templates are shown to prevent flickering
in the case that the loading is super fast. The @loading template lets you
also add a max length of time to wait before showing
the loading template. That way, if your server
responds super fast, the loading template
wouldn't show at all. And if anything goes wrong,
we have a place for that too, the @error template. Testing a defer block
is a breeze, too. We've provided a
deferred testing fixture that will let you manually cycle
through a defer block's phases so you can verify at
each step of the way that your defer block is
configured exactly how you want. It's built right into
the component fixture. So you'll feel right at home
in the test environment. It certainly won't
test your patience. Angular v17's new
defer blocks offer you the ultimate in
flexibility for defer loading whatever content you want. You can now optimize your
initial load and bundle size to your heart's content. You can try out the developer
preview of defer blocks right now with the v17 release. For more details and
all the documentation, check out our brand new
deferred loading guide. What's the best way to
use these defer blocks? Well, to answer
that, I defer to you. Live long and
prosper, my friends. [MUSIC PLAYING]
