Lazy loading will make our application faster and smaller on its initial load. However, we can optimize it even further so that we won't download a JavaScript file on page transition. You may be wondering how we will load that page without its JavaScript. To do that, we pre-load the JavaScript after the initial bundle of the landing page is downloaded, and after the page is rendered, download the JavaScript of other pages when the browser is idle.

In Angular Router, you can define your pre-loading strategy as follows:

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

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

In the forRoot method of RouterModule, pass configurations as the second parameter, where you can set preloadingStrategy. Here, we have used one of the strategies that Angular Router provides, called PreloadAllModules, which will load all the modules after the page renders initially. 

Using this simple trick, we now load our single bundle in the first load and instantly download all the modules after the browser becomes idle, which makes sure that subsequent pages load faster. We can define our pre-loading strategy or use some third party strategies such as ngx-quicklink, which we'll cover in the following section.