Angular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code)

Dieses Mal werde ich Ihnen die Lazy-Loading-Funktion von Angular6.0 (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der Lazy-Loading-Funktion von Angular6.0? Ein praktischer Fall, schauen wir uns das einmal an.

Wir stoßen oft auf ein solches Problem, wenn wir eine Steuerungsbibliothek eines Drittanbieters verwenden, verwenden wir nur eine oder wenige Komponenten, was viele nutzlose Dinge mit sich bringt, was zu einer zu großen Lautstärke führt. Oder die Homepage verwendet viele Komponenten und die Ladegeschwindigkeit der Homepage ist langsam. Zu diesem Zeitpunkt müssen wir möglicherweise die im visuellen Bereich des Benutzers verwendeten Komponenten laden. Während der Benutzer nach unten scrollt, laden wir diese Komponenten erneut und laden sie schrittweise . Progressive Erfahrung, zu diesem Zeitpunkt können Sie die von diesem Tool implementierten Funktionen nutzen. Oder einige unwichtige Bereiche einer Seite, wie z. B. Werbung von Drittanbietern oder unwichtige Elemente, können Lazy Loading und Lazy Rendering nutzen, um die Wartezeit des Benutzers auf den ersten Bildschirm zu verkürzen. Alles geschieht, ohne dass der Benutzer es merkt. Verbessert die Benutzererfahrung erheblich, insbesondere bei mittleren und großen Projekten ist eine Optimierung ein Muss!

Projektadresse Github

Installieren

yarn add iwe7-lazy-load

Verwenden Sie

import { Iwe7LazyLoadModule, LazyComponentsInterface } from 'iwe7-lazy-load';
// 用到的懒加载组件
let lazyComponentsModule: LazyComponentsInterface[] = [
 {
 // 组件的selector
 path: 'lazy-test',
 // 组件的相对地址
 loadChildren: './lazy-test/lazy-test.module#LazyTestModule'
 }
];
@NgModule({
 imports: [Iwe7LazyLoadModule.forRoot(lazyComponentsModule)],
 // 注意加上这些
 schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class AppModule {}

<p #ele>
 <lazy-test></lazy-test>
</p>

import { LazyLoaderService } from 'iwe7-lazy-load';
@ViewChild('ele') ele: ElementRef;
constructor(
 public lazyLoader: LazyLoaderService,
 public view: ViewContainerRef
) {}
ngOnInit() {
 // 开始渲染懒组件
 this.lazyLoader.init(this.ele.nativeElement, this.view);
}

, um eine Lazy-Loading-Komponenten-Demo zu definieren

import { LazyComponentModuleBase } from 'iwe7-lazy-load';
@Component({
 selector: 'lazy-test',
 template: ` i am a lazy`
})
export class LazyTestComponent {}
@NgModule({
 imports: [
 RouterModule.forChild([{
  path: '',
  component: LazyTestComponent
 }])
 ],
 declarations: [LazyTestComponent]
})
export class LazyTestModule extends LazyComponentModuleBase {
 getComponentByName(key: string): Type<any> {
 return LazyTestComponent;
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery-Codierungskonvertierung Base64-Upload über AJAX

Vue-Komponentenschreibspezifikation

Das obige ist der detaillierte Inhalt vonAngular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!