Lazy-Loading Components

[00:00:00]
>> Alex Okrushko: Now let's do one other thing. I'm going to add another here. Let me just serve my backend separately. So npm run server, this is what my API's running. And I'm going to do the production build because right now we're working with the development build, right? Let me do my production build instead. The way you build the production build is npm build, or, you know, package.json.

[00:00:37]
I can see that. Npm run build will basically do the same thing for you, right? So npm run build, this will create the production bundle. We'll run this. And production does a few more optimizations, right? I can see here, it created a dist folder where we have a browser that we can serve here. All right, so how can we check that?

[00:01:16]
Let's do now serve this folder. We can do it with the npx. There's a HTTP server utility, and again, one of those libraries that can help us serve files from this folder, because it basically created the whole bundle, right? We have the browser, and we have our index HTML here that pulls this thing so we can serve all of this with this npx server, right?

[00:01:52]
HTTP server, let's do that. You might need to download it first if you don't have it. I didn't have to, it already was downloaded, and npx will download it for you as well. Let's see this file now. Here it is, right? I see it's running on localhost like 8080, right? And what we're going to do here is we're going to do another Lighthouse report.

[00:02:22]
Analyze page load. Perfect, so we are at 78 already, so production build is already optimized a few things as well. How can we optimize something even more? This is something we touched a little bit on the intermediate Angular, but we can optimize things significantly more. Let's do that here. Not significantly, but again, some improvements.

[00:02:58]
Right now we are pulling all the files together. Let me just do that, right? Any path, we're bringing the entire bundle. As you can see when we build it, even if we do the run, I just do the npm and you serve because our backend's already running. We just have main chunk and styles, right? We got rid of the polyfills, great, but our main chunk is still there, and we're not using any of the main chunk, a lot of the pieces from the main chunk here.

[00:03:37]
We're not using admin parts, we're not using details, but we're bundling it together. So how can we solve this? So instead of the component here, we can do load component, and this will be the event details. So let me just copy this. We are going to lazy load this component. So we're going to do the import of this.

[00:04:14]
Let's do the import. And then once we have this, we have this module. We're going to extract event details from this module. So we're going to import this lazily, and we're going to import this one lazily too. Basic definition of lazy loading to you is, how would you describe that? So the basic definition of lazy loading is we have a main chunk, and we're separating, splitting this code, whatever is in the event details code, in a separate JavaScript chunk, and we're not loading that chunk until we need it.

[00:04:59]
So basically until we start navigating to this path, only then we'll pull that chunk in. So you can control that with, I don't know, routes or like? Yes, you can do control with routes. I'm going to see how we can control it with defer as well in a second. But those are few ways. You can control it at routing level, or you can control it at the component chunks level.

[00:05:26]
So you're just continuing to fine tune performance, exactly. Exactly. So now we can load this component as well. We can load this as well, so we'll do the import. Import this. Then this module has us create event. And notice like our guard is still guarding us just fine, or it'll load us only. We'll check if we can even load.

[00:06:09]
So now let's do this. Let's do another build. And now, as you can see here, look how many chunks we have now, the initial chunks, and it separated certain pieces here. You can see here, style, main, and you can see the lazy chunks. Can you see them? Let me just bump that up. You can see the lazy chunks, right? And this one says create event and event details.

[00:06:37]
So now we separated half of our application, basically, not half, but a third of our application into different parts. This is super important when you have the homepage that you always want to have snappy, instantly, right? Instantly there. If you are going to a different route, that will automatically lazy load that as well, which is fine.

[00:07:11]
We will always get the main chunk. So let's see if we have if we moved the needle here. Let's run and serve this new build. This build was here, and you can see right now the performance is at 78. Let's see if we got any improvements, further improvements. 83. We're getting somewhere, right? We're getting somewhere, which is great.