Angular modular architecture helps to divide the functionality of applications into feature modules and support for them to be scalable and maintainable. However, it becomes more and more important to optimise performance, as applications grow. Lazy Loading in Angular defers feature module initialization to shrink main bundle size and optimum load time, whereas Preloading Strategies helps to increase responsiveness. This report provides assessment of their impact on performance and best practises.

Understanding Lazy Loading in Angular

Lazy Loading in Angular is a performance optimisation technique that enables us to load feature modules only when they are needed. Angular’s default eager loading bundles all these modules ahead of time, bloating bundle size and delaying TTI in large apps. Lazy Loading of modules is implemented to only load the required ones when the users navigate to the particular route.

NgModules are how Angular manages modules, and Lazy Loading relies on the Router Module’s loadChildren property to dynamically load feature modules. Typically, the consumption of resources and poor performance are caused by loading all modules at startup. Lazy Loading is using Angular’s loadChildren and dynamically loading modules, resulting in a smaller startup bundle size and a faster FCP.  

The main advantages of Lazy Loading in Angular are faster initial load times by avoiding the excessive preload, lowered memory usage to provide a more responsive experience, and optimal resource utilisation thanks to dynamic module loading. Preloading Strategies in Angular give special loading to some modules loaded in the background to minimise navigation delays.

Implementing Lazy Loading in Angular

In order to do Lazy Loading on Angular, Angular developers allow the Router Module to load feature modules as the need arises. Angular’s use of Lazy Loading splits modules by route, so that imports of modules are deferred until their routes are being navigated at runtime using loadChildren in the Router config. By virtue of this approach, feature modules are not packaged into the main application until the user goes to navigate to the relevant route (Liam and Sophia 2021).

The most important role of the loadChildren function is to specify path of the module to be loaded and load it only when required. This increases Angular performance optimisation in order to reduce the application’s initial bundle size, accelerating the load time and improving the efficiency.

One of the best practices for lazy loading in Angular is to modularize feature components properly, to have minimal routing nesting in routes such that navigation becomes easier, and to use @angular/router’s loadChildren function to dynamically inject modules. In addition to that, Lazy Loading in Angular can also be combined with Preloading Strategies in Angular for increased performance by intelligently preloading frequently accessed modules in the background without blocking navigation.

Preloading Strategies in Angular

Angular’s Preloading Strategies are for optimizing navigation performance through asynchronously loading Lazy Loaded modules in the background for a smoother route transition and still ensuring the benefits of modularized loading. Lazy Loading speeds up the first load time by postponing module loading, however there may be small slowness when users navigate to unloaded routes. This is mitigated by Preloading Strategies in Angular that will prefetch some modules without blocking main application (Bal et al. 2022).

Then Angular also provides built in preloading strategies to figure out the most efficient way to load modules. The default behaviour is that of the NoPreloading strategy which means that the Lazy Loaded modules will only be loaded on access. Angular’s built in strategy PreloadAllModules first applies Lazy Loading principles to prefetch all Lazy Loaded modules post initialization which improves navigation latency but comes at the expense of increased background network usage and memory.  

In order to provide more flexibility, Custom Preloading Strategies can be implemented to preload depending on the modules being loaded based on a network speed, user roles or some frequently used routes.

In Angular, it depends on the application whether one chooses to go for Lazy Loading in Angular or Preloading Strategies in Angular. Lazy Loading in Angular is suitable for modules being accessed rarely, while Preloading Strategies in Angular will help improve performance when modules frequently used. By implementing both of these techniques but only to the extent that doesn’t unnecessarily burden the network, we’re able to get the best out of Angular performance optimization without getting in each other’s way.

Implementing Custom Preloading Strategy

Custom Preloading Strategy allows users to build conditional module preloading based on runtime factors such as network speed, authentication or device capabilities, improving Lazy Loading as well as user experience. Unlike PreloadAllModules, which preloads all Lazy Loaded modules in the background, a custom strategy allows for selective preloading, and without incurring excessive cost to performance.

Using Custom Preloading Strategy in Angular is helpful for speeding up initial load time for applications where a few most frequently used modules are eagerly preloaded so that the remaining Lazy Loaded modules get preloaded whenever needed. This is done by developers either through a TypeScript class that defines what modules should preload based on conditions defined to them or through any other means. This strategy can be applied to the Angular Router Module and it supports the selective preloading. Preloading frequently visited pages i.e. dashboards and loading rarely used settings or admin modules Lazy Loaded is a common use case where both speed and efficiency are to be maintained.

Comparison: Lazy Loading vs. Preloading Strategies

Whilst actually being beneficial, the Lazy Loading in Angular increases Angular performance optimisation but also might experience delay in navigation with the help of (Theodoraki et al. 2023). In Angular, Preloading Strategy is an enhancement to Lazy Loading, where we asynchronously welcome the modules to load quickly when they are navigated to and avoid the overhead of the on demand loading time. Angular’s Custom Preloading Strategy offers flexibility where performance is based on user behaviour and condition.

Conclusion & Best Practices

Lazy Loading and Preloading Strategies make Angular application perform better as it optimises module loading. Lazy Loading in Angular helps to shrink main bundle size and preloading increases navigation speed using tools such as Chrome Devtools and Lighthouse. With feature modularity and monitoring of performance with Chrome DevTools and Lighthouse, the approach provides balance. Strategies are experimented code to refine responsiveness for a better user experience.

References

Bal, H., Ateş, K., Karaçay, T. and Aktürk, N., 2022. Effect of preload on the vibrations of EHL angular contact ball bearings: theoretical and experimental results. Lubricants, 10(3), p.46.

Bâra, R.M., Boiangiu, C.A. and Tudose, C., 2024. Analysing the performance impacts of lazy loading in web applications. Journal of Information Systems & Operations Management, 18(1), pp.1-15.

Liam, C. and Sophia, M., 2021. Angular Ivy and Beyond: Transforming Application Rendering and Development Efficiency. International Journal of Trend in Scientific Research and Development, 5(6), pp.2015-2029.

Theodoraki, K., Hadzilia, S., Valsamidis, D., Kalopita, K. and Stamatakis, E., 2023. Colloid preload versus crystalloid co-load in the setting of norepinephrine infusion during cesarean section: time and type of administered fluids do not matter. Journal of Clinical Medicine, 12(4), p.1333.

Xu, L., Xu, Y., Wang, K., Ye, L. and Zhang, W., 2024. Two-stream bolt preload prediction network using hydraulic pressure and nut angle signals. Engineering Applications of Artificial Intelligence, 136, p.109029.