The concept underlying lazy loading is that we only load the HTML, CSS, and JavaScript that our application requires to render its first route, and then load other COMPONENTS as needed. The good news is that a new Ionic Angular 4.0 app comes pre-configured with lazy loading.

Lazy loading is a method in which we load THINGS only when we need them. The fundamental idea behind such a notion is that when the application is opened, we don't need to load every page in it. The @IonicPage decorator was advised in PREVIOUS versions of the Ionic framework to sleepy load your pages, but in the latest version of Ionic (Ionic 4), we lazy load our Angular components using Angular routing. Each Ionic component is a web component, and these components will only be loaded lazily when they are used in the Ionic application.

When you use the tabs starter template to create a new Ionic app, this is the first route that is created for you. The Angular router will dynamically load this file when the user navigates to the route if you specify a loadChildren string instead of passing a page class to component. This JavaScript is also separated from the rest of the app and placed in its own bundle.

The routes in the tabs routing module are set up as follows:

Each tab in this configuration loads its children SLOWLY, thus all of tab2's files aren't loaded until the user clicks on the tab2 page.

We can avoid the browser having to download, process, and compile our entire programme before the user interacts with the first page by dividing it up into smaller lazily loaded pieces. If our app was large, this would significantly increase the program's first load time.

Optimizing Lazy Loading:

You can provide a pre-loading strategy when importing the Router module into the main app module. There are two that come with Angular out of the box:

• NoPreloading: No preloading of lazily loaded modules is done. If no strategy is specified, this is the default behaviour.
• PreloadAllModules: When the network becomes idle, this technique will preload all of the REMAINING modules once your app loads the initial module. This option is automatically established for you in the Ionic beginning templates.