NgModule dan Optimization – 4

Setelah selesai memisahkan module berdasarkan fitur pada tutorial sebelumnya, berikutnya kita akan melakukan optimization dengan lazy loading.

Misalnya kita memiliki aplikasi seperti diagram dibawah.

Jika tidak digunakan lazy loading, saat user mengakses path root, seluruh component untuk path lainnya akan diload juga.

Dengan menggunakan lazy loading, pada awalnya kita akan load route component saja. Ketika route lainnya diakses, misalnya /products, baru component tersebut di load.

Jika Anda lihat pada developer tools pada tab network, saat sebelum menggunakan lazy loading, file yang didownload cukup besar. (saat ini cukup besar karena masih dalam mode development, setelah mode production, ukuran file akan jauh lebih kecil).

Implementasi Lazy Loading untuk Recipes

Buka file recipes-routing.module.ts, lalu ganti path recipes menjadi empty string.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";


import { AuthGuardService } from "../auth/auth-guard.service";
import { RecipeDetailComponent } from "./recipe-detail/recipe-detail.component";
import { RecipeEditComponent } from "./recipe-edit/recipe-edit.component";
import { RecipeHomeComponent } from "./recipe-home/recipe-home.component";
import { RecipesResolverService } from "./recipes-resolver.service";
import { RecipesComponent } from "./recipes.component";

const recipeRoutes: Routes = [    
    //ganti path: 'recipes' menjadi path: ''
    {path: '', component: RecipesComponent, canActivate: [AuthGuardService] , children:[  
        {path: '', component: RecipeHomeComponent},
        {path: 'new', component: RecipeEditComponent},
        {path: ':id', component: RecipeDetailComponent, resolve: [RecipesResolverService]},
        {path: ':id/edit', component: RecipeEditComponent, resolve: [RecipesResolverService]}
    ]}
];

@NgModule({
    imports: [RouterModule.forChild(recipeRoutes)],
    exports: [RouterModule]
})
export class RecipesRoutingModule {

}

Kemudian buka app-routing.module.ts, tambahka path recipes seperti dibawah

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

const appRoutes: Routes = [
    {path: '', redirectTo:'/recipes', pathMatch: 'full'},
    {path: 'recipes', loadChildren: ()=> import('./recipes/recipes.module').then(m=> m.RecipesModule)}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{
}

Kemudian hapus import module recipes pada app.module.ts

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { AppRoutingModule } from './app-routing.module';

import { ShoppingListService } from './shopping-list/shopping-list.service';
import { RecipeService } from './recipes/recipe.service';

//hapus karena digunakan lazy loading
//import { RecipesModule } from './recipes/recipes.module';
import { ShoppingListModule } from './shopping-list/shopping-list.module';
import { SharedModule } from './shared/shared.module';
import { AuthModule } from './auth/auth.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    //RecipesModule,  //menggunakan lazy loading
    ShoppingListModule,
    AuthModule,
    SharedModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Langkah selanjutnya restart ng serve dari command prompt agar lazy loading diterapkan.

Jika Anda jalankan, aplikasi akan tetap berjalan seperti sebelumnya, namun sekarang recipe module di load ketika diperlukan.

Hal yang perlu diperhatikan adalah, lakukan lazy loading untuk page yang jarang diakses, atau akan diakses belakangan.

Secara sederhananya, melakukan lazy loading untuk path root adalah sia-sia, karena sudah tentu root akan selalu diakses ketika pertama kali membuka aplikasi.

Latihan

Tambahkan lazy load untuk shopping-list dan auth module.

Solusi

File app-routing.module.ts :

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

const appRoutes: Routes = [
    {path: '', redirectTo:'/recipes', pathMatch: 'full'},
    {path: 'recipes', loadChildren: ()=> import('./recipes/recipes.module').then(m=> m.RecipesModule)},
    {path: 'shopping-list', loadChildren: ()=> import('./shopping-list/shopping-list.module').then(m=> m.ShoppingListModule)},
    {path: 'auth', loadChildren: ()=> import('./auth/auth.module').then(m=> m.AuthModule)},
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{
}

File shopping-list.module.ts

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";


import { ShoppingEditComponent } from "./shopping-edit/shopping-edit.component";
import { ShoppingListComponent } from "./shopping-list.component";
import { SharedModule } from "../shared/shared.module";

@NgModule({
    declarations:[
        ShoppingListComponent,
        ShoppingEditComponent
    ],
    imports:[
        FormsModule,
        RouterModule.forChild([
            {path: '', component: ShoppingListComponent}
        ]),
        SharedModule
    ]
})
export class ShoppingListModule {}

File auth.module.ts:

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";

import { AuthComponent } from './auth.component'; 
import { SharedModule } from "../shared/shared.module";

@NgModule({
    declarations:[
        AuthComponent
    ],
    imports:[
        FormsModule,
        RouterModule.forChild([
            {path: '', component: AuthComponent}
        ]),

        SharedModule
    ]
})
export class AuthModule{}

File app.module.ts

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { AppRoutingModule } from './app-routing.module';

import { ShoppingListService } from './shopping-list/shopping-list.service';
import { RecipeService } from './recipes/recipe.service';

//hapus karena digunakan lazy loading
//import { RecipesModule } from './recipes/recipes.module';
//import { ShoppingListModule } from './shopping-list/shopping-list.module';
//import { AuthModule } from './auth/auth.module';

import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    //RecipesModule,  //menggunakan lazy loading
    //ShoppingListModule,
    //AuthModule,
    SharedModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tips, dapat Anda lihat pada compile log dari ng serve, terdapat informasi file lazy chunk.