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...