Code Splitting and Lazy Loading in Angular: Strategies for 2024

As applications grow larger and more complex, optimizing performance becomes increasingly critical. One of the key challenges developers face is managing the size of the JavaScript bundles their Angular applications produce. Large bundle sizes lead to longer load times, impacting both user experience and SEO. To address this, code splitting and lazy loading have become essential strategies in modern Angular applications.

What is Code Splitting?

Code splitting, sometimes referred to as lazy loading, is a technique with which Angular applications can achieve better speed by being divided into smaller parts that are loaded asynchronously only when required. This method contributes to the application’s initial bundle size reduction, which improves user experience and speeds up initial loading times.

Code splitting in Angular may be accomplished by utilizing the loadChildren property in route settings in conjunction with the Angular Router. Code splitting in Angular happens automatically when modules with lazy loading are used. As the app is being built, the Angular CLI separates the various chunks (or bundles) that make up your application.

What is Lazy Loading?

Instead of loading all of the modules or components at once during the initial loading when the program starts, lazy loading loads them asynchronously, only when needed. This implies that Angular can fetch and load particular application components on-demand when the user interacts with the program, as opposed to loading the entire application.

Among the many benefits of this strategy include quicker initial loading times, lower resource usage, and improved overall performance. The user experience is improved by breaking up the application into smaller components and loading them dynamically only when needed.

Related read: How To Implement Angular Elements

Why are Code Splitting and Lazy Loading Important

As Angular evolves, applications tend to get larger with more features, pages, and dependencies. Without efficient strategies like code splitting and lazy loading, these applications can become sluggish, especially on slower networks or devices. With web performance being a ranking factor in Google’s Core Web Vitals, the need for faster, leaner apps has never been more critical.

With progressive enhancements in web frameworks and the focus on improving user experience, using code splitting and lazy loading in Angular apps will be a must-have approach for maintaining a high-performing web application.

Related read: Best Frontend Frameworks in 2024 for Web Development

Code Splitting in Angular

Angular’s powerful router makes it easy to implement code splitting. By default, Angular applications are structured to encourage modularity. Each feature is encapsulated in a module, which can be split out and lazy-loaded.

Angular’s loadChildren method in the router configuration is the go-to way to set up lazy-loaded routes, automatically enabling code splitting.

Example of Code Splitting

Let’s start by setting up a feature module called UserModule. To enable code splitting, we need to lazy-load the UserModule.

1. Create a User Module

This command will automatically add a lazy-loaded route to your AppRoutingModule like so:

Here, the loadChildren method tells Angular to load the UserModule only when the user navigates to the /user route. The import statement is a dynamic import, which splits the code into a separate chunk that will only be downloaded when necessary.

2. User Module Setup

This setup means the UserProfileComponent and its dependencies will only be loaded when the user visits the /user route.

Lazy Loading in Angular

Lazy loading is seamlessly integrated with Angular’s routing module. When lazy loading is set up, Angular ensures that only the necessary JavaScript bundle (related to the lazy-loaded module) is fetched when required.

Related read: Understanding Angular Routing and Navigation with Step-by-Step Tutorial

Lazy Loading Example

The Angular Routing Module may be made to use lazy loading by doing the following steps:

1. Make Modules

Depending on how it will be used, divide your angular application into several modules.

Each module should represent a different application branch or feature. The following command in CLI allows us to create both module and routing files.

2. Define Routes in Each Module

Every separate module needs to have its own set of routes defined, and the RouterModule.forChild() method is used to define the routes unique to that module. The code snippet that follows shows how we set up routes for DemoModule 1.

3. Changes in AppRoutingModule

Take remove the app-routing-module.ts file’s component imports.

To implement lazy loading modules, remove the property-named component from the array of routes and add the property named loadChildren in its place.

To build routes, we utilize the RouterModule.forRoot(routes) method in AppRoutingModule.

4. Configure Lazy Loading Routes

For modules that load slowly, we must configure particular modules in the loadChildren attribute.

For routes that are loaded slowly, make sure to set the loadChildren property in the AppRoutingModule’s route configuration. This attribute should correspond to the feature module file location, the module class name, and a hash (#).

In the demo-routing-module.ts file:

In-app-routing-module.ts file:

DemoModules 1 and 2 are our two demo modules; each has its routes and components. Using the loadChildren property, which dynamically imports the module files when the corresponding routes are visited, we applied lazy loading for the feature modules.

This kind of lazy loading implementation allows Angular to load modules and their components only when needed, which improves application performance and shortens initial loading times.

Best Practices for Code Splitting and Lazy Loading in Angular (2024)

1. Organize Your Application into Feature Modules: Always aim to modularize your Angular application by feature. This makes it easier to lazy-load only the modules that are needed.
2. Use Route-Based Lazy Loading: Lazy load routes that aren’t part of the critical path. This guarantees that only necessary parts are loaded first.
3. Consider Preloading Modules for Faster Navigation: Angular’s PreloadAllModules strategy can be helpful for preloading non-critical modules after the initial load, ensuring faster navigation on subsequent visits.
4. Monitor Bundle Sizes: Regularly analyze your application’s bundle sizes using tools like Webpack Bundle Analyzer or Angular CLI’s built-in tools (`ng build –stats-json`). Identify large modules or third-party libraries that can be optimized.