DEV Community

Cover image for Preload All Angular Bundles
John Papa for Angular

Posted on • Updated on • Originally published at johnpapa.net

Preload All Angular Bundles

Users want fast apps. Getting your JavaScript bundles to your browser as quickly as possible and before your user needs them can make a huge and positive impact on their user experience. Knowing how you can improve that experience is important.

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the articles in this series

Preload All

Out of the box Angular's default preload strategy is to not preload. So if you want to preload you must change that behavior.

You can tell Angular to preload all of the lazy loaded modules in advance by using the built-in preload strategy PreloadAllModules. Simply import this from @angular/router as shown below.

import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Try It

Now rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will see all of your bundles already preloaded.

Now when you navigate to your lazy loaded bundles you will see that they are already loaded, so the experience is fast. If you wish to really see this make a difference, enable throttling in your developer tools to a slower connection such as 3G, then refresh the page. The preloading will be much more visible now in the Network tab.

Deciding What Is Right For Your App

Now that you know how to use the built-in PreloadAllModules strategy, how do you evaluate if this is the right strategy for your app? Well, this depends on your situation.

If your app has several bundles from lazy loading and all are large, these will all start transferring to your browse as your app loads. You don't control which ones load first, so if a user clicks on a route chances are that it won't be the first one preloaded.

What if your users rarely ever go to some of these routes? Does it make sense to preload them all up front?

If you feel the users could benefit from the routes all loading up front, this may be a good choice.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

Top comments (6)

Collapse
 
sevenstories profile image
Joe Wheatley

The best trade off I've found is if the modules are all locked by user role/permissions and make the preload strategy check permissions. If the user doesn't have permission it doesn't load. We have a rather large application at work, there's around 15 lazy loaded modules, but each user role will only ever have access to around 5

Collapse
 
john_papa profile image
John Papa

Thanks for sharing.

Could you combine that with CanLoad? Possibly don’t even let it get to a strategy for preloading if they don’t have permission

Maybe a combo of both.

Collapse
 
mfaghfoory profile image
Meysam Faghfouri

If we set it to preload all modules, will browser wait to load all of them? Or after showing first page they start to loading in background?

Collapse
 
john_papa profile image
John Papa

Here is a link to the docs that explains it best. angular.io/guide/router#preloading...

In short - the app loads - then it looks for modules it can preload.

Collapse
 
flignats profile image
Ray

I thought angular 8 was removing function calls in ngModule?

i.e. RouterModule.forRoot()

Collapse
 
john_papa profile image
John Papa

Do you have a reference for this?