Improving the size of your app – lazy loading – Organizing Your Application-1

A good strategy for separating modules from your Angular application will increase your team’s productivity and improve code organization. But another advantage that will impact the quality for your user is the use of the lazy loading technique for modules.

If we run the build process of the sample application using the ng build command, we can see the following message:

Figure 2.4 – Sample application bundle size

The size of our application’s initial bundle (the main.ts file) is 94.73 kB, which may seem small, but for the size of our application with few features, it is a considerable size.

As the project has more features, the tendency is for this initial bundle to increase considerably, harming our users’ experience as they will initially need to download a larger file. This problem particularly manifests itself in environments where the internet is not very good, such as 3G networks.

To reduce this file and consequently improve our user experience, the ideal is to have smaller packages and for these packages to be loaded only when necessary – that is, in a lazy way.

We are going to refactor our project, and the first step we have already taken is to separate the functionalities into feature modules (in the Avoiding anti-pattern – single module app section, we explained the danger of not separating the application modules, and without a doubt, the size of the bundle is the most impactful for the user).

Now, let’s create a route file for the Home module. As the module already exists, let’s manually create the home-routing.module.ts file in the same folder as the home.module.ts file.

In this file, we will add the following code:
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { HomeComponent } from ‘./home/home.component’;
const routes: Routes = [
  {
    path: ”,
    component: HomeComponent,
  },
];
@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule],
})
export class HomeRoutingModule {}

This route file is similar to the application’s main route file, with the difference that @NgModule’s import uses the forChild method instead of forRoot. This is because this module is a subroute of the main route.

Another important detail to note is that the chosen path for the HomeComponent component is empty. We can explain this because the main route file that defines the /home route and how this module represents the /home component is already defined.

In the home.module.ts file, let’s change it to import the route file:
import { NgModule } from ‘@angular/core’;
import { HomeComponent } from ‘./home/home.component’;
import { SharedModule } from ‘../shared/shared.module’;
import { HomeRoutingModule } from ‘./home-routing.module’;
@NgModule({
 declarations: [HomeComponent],
 imports: [
   SharedModule,HomeRoutingModule
 ]
})
export class HomeModule {}