tiktok นับยอดวิวยังไง

Lazy loading ใน Angular เป็นเทคนิคในการโหลดส่วนประกอบหรือโมดูลของแอปพลิเคชันตามต้องการเท่านั้น

Lazy loading มีข้อดีหลายประการ เช่น:

• ปรับปรุงประสิทธิภาพการโหลดหน้าแรก (FCP) เนื่องจากไม่จำเป็นต้องโหลดส่วนประกอบหรือโมดูลทั้งหมดเมื่อผู้ใช้เริ่มต้นแอปพลิเคชัน
• ลดการใช้แบนด์วิดธ์เครือข่าย
• ปรับปรุงประสบการณ์ใช้งานสำหรับผู้ใช้เนื่องจากผู้ใช้ไม่จำเป็นต้องรอให้ส่วนประกอบหรือโมดูลทั้งหมดโหลดก่อนที่จะเริ่มใช้งาน

Angular มีฟีเจอร์ที่เรียกว่า lazy loading ซึ่งช่วยให้เราสามารถสร้าง lazy loading apps ได้อย่างง่ายดาย

วิธีการใช้ lazy loading

ในการใช้ lazy loading เราต้องสร้างโมดูลแยกต่างหากสำหรับส่วนประกอบหรือโมดูลที่ต้องการใช้ lazy loading

จากนั้นเราต้องเพิ่มโมดูลเหล่านี้ลงใน app-routing.module.ts โดยใช้ lazy loading

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MyComponentModule } from './my-component/my-component.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: AppComponent
      },
      {
        path: 'my-component',
        loadChildren: './my-component/my-component.module#MyComponentModule'
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

เมื่อผู้ใช้เข้าถึงเส้นทาง /my-component โมดูล MyComponentModule จะถูกโหลดแบบ lazy

ตัวอย่าง lazy loading

ต่อไปนี้เป็นตัวอย่าง lazy loading

// my-component.module.ts

import { NgModule } from '@angular/core';
import { MyComponent } from './my-component.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [],
  providers: [],
  bootstrap: [MyComponent]
})
export class MyComponentModule { }

// app.component.html

<a href="/my-component">My Component</a>

// app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private router: Router) {}

  ngOnInit() {
  }

}

เมื่อผู้ใช้คลิกที่ลิงก์ My Component โมดูล MyComponentModule จะถูกโหลดแบบ lazy และส่วนประกอบ MyComponent จะถูกแสดง

สรุป

Lazy loading เป็นเทคนิคที่มีประโยชน์สำหรับแอปพลิเคชัน Angular ที่ต้องการปรับปรุงประสิทธิภาพการโหลดหน้าแรกและลดการใช้แบนด์วิดธ์เครือข่าย

Angular มีฟีเจอร์ที่เรียกว่า lazy loading ซึ่งช่วยให้เราสามารถสร้าง lazy loading apps ได้อย่างง่ายดาย