In this lecture, we will explore one of the most powerful features for boosting the performance of
your app.
I'm referring to a feature called Lazy Loading.
Applications are made up of hundreds of files, but do we need to load these files?
The user may need to download a few files for a page by loading code the user doesn't need.
We're delaying the page load time.
We should only load the code the user needs right now.
Lazy loading is a feature for addressing this problem.
We can break our application into chunks.
Processing and application is done with a library called Web Pack.
The angular Seelye configures this tool for us.
It's not common for developers to worry about optimizing web pack.
The idea of a chunk is a web pack feature.
It's a fancy word to describe the pieces of your application.
By default, Web Pack will bundle your file into as few files as possible.
We can override this behavior by manually telling Web Pack to keep a chunk out of the bundle, while
at the same time load the chunk when it is needed.
Ultimately, it's a file that doesn't get downloaded by our app on initialization.
The file gets downloaded when we instruct Web Pack to load it.
Overall, this is known as lazy loading.
Implementing lazy loading is easy.
We are going to lazy load the video feature of our app.
Not all users will upload or manage clips on our app.
Some users may just want to watch clips uploaded by their friends.
We should lazy load the video features.
Luckily, we outsourced the code into a separate module.
We can lazy load the entire video module.
The question is when should we load this module?
We can load this module when the user visits the manage or upload pages.
Let's get started.
Open the app routing module in your editor.
Inside the roots array, let's add a new object before the not found roots.
Inside the object and the path property with a value of an empty string.
The path property will have an impact on our routes, angular will depend on the path from this object
with the routes in the video routing module.
Let me elaborate further.
At the moment, the current path is an empty string.
We have two routes in the video routing module called Manage and Upload.
Angular will append the path from the app routing module with the paths from the video routing modules.
For example, let's say we wanted to centralize all paths under a path called dashboard.
The managed path would become dashboard slash manage, the upload path would become dashboard slash
upload.
You can think of the path and this object as the base path for the paths in the child module.
Otherwise, we would need to update the links in our components.
I'm going to leave it as an empty string.
Next, we need to lazy load the module.
Typically, we would add big component property to load a component.
Alternatively, we can define a property called load children.
This property can be used to load a module dynamically loading a module is an asynchronous operation.
You know me, I like to use async.
Await syntax.
Define an asynchronous function.
From this function, we must return the module, we can import files with the import function.
The path to the module is the following dot slash video slash video Typekit module.
This function is asynchronous, so add the await keyword.
Next, Angular wants the module.
Let's look inside the video module.
You might have noticed this already, but Angular doesn't like default exports.
Everything is exported under a name.
The video module class is a named export web pack isn't aware of the types of values exported by a module.
We need to explicitly tell Webpack where to find the module class back in the app routing module.
Ramp the return value with parentheses.
Next, return the video module object.
We're finished a recap, we're chilling, angular to load this module when the user visits the paths
from this module.
There's one more modification we need to make.
We don't need to import this module from the app module.
Open this file in your editor.
Next, remove the references to the video module from this file.
Let's try testing the app in your browser, open the home page with the developer tools opened.
We're going to focus our attention on the network panel of the developer tools under this panel.
Let's filter the request by JavaScript files.
The file sizes are large, this build size is to be expected since we haven't built the project for
production.
Don't be alarmed.
It's completely normal.
Once we build the project for production, the build is going to be optimized for hosting.
Let's navigate to the manage or upload pages.
After doing so, a new file has been downloaded.
This file is the chunk I was referring to earlier.
We've outsourced the logic for these two pages in a separate file by doing lazy loading.
The other pages are going to load slightly faster if you want.
You can take this solution a step further by placing every page into a separate module and lazy load
them.
The more you lazy load, the faster your app will load.
It's a simple way of boosting the performance of your app.
For now, I think lazy loading the video module will suffice.