Get to know these Preloading Strategies to reduce Angular App loading time
User experience is one of the most critical factors for successful web applications today. And if we can optimize app loading time, it will undoubtedly establish a positive first impression.
Who doesn’t love swift and smooth web apps, after all?
In this article, I will show you how to improve app loading time by following a set of preloading strategies. Let’s start with an introduction.
What is preloading in Angular?
Preloading means loading data before some event, either synchronously or asynchronously.
Angular documentation describes two types of preloading mechanisms.
- Preloading modules — Loading modules asynchronously in the background is called preloading modules. This technique should be used with lazy loading.
- Preloading component data —Using resolvers for the routes to block a component from rendering until the data is available.
The main focus of this article is preloading modules. Since you now have an idea about what preloading means, let’s look at the benefits of it.
Why do we need preloading?
Before diving into the benefits of preloading modules, let’s take a look at what lazy loading does, given that it’s essential for preloading.
Lazy loading
If all the angular modules are loaded at once when a user visits the app, it increases the load time. Lazy loading resolves this issue by loading modules on demand. It reduces the initial bundle size, hence improving app load time.
Preloading is a mechanism to further optimize loading time by loading modules in the background.
Now let’s see preloading in action.
#routing #preloading #angular
