Angular6.0 ermöglicht verzögertes Laden

Dieses Mal werde ich Ihnen vorstellen, wie man Lazy Loading in Angular6.0 implementiert. Was sind die Vorsichtsmaßnahmen für Lazy Loading in Angular6.0? Das Folgende ist ein praktischer Fall.

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:

Angular-Druckseite angegebene Funktion

Detaillierte Erläuterung des Render-Falls in React

Das obige ist der detaillierte Inhalt vonAngular6.0 ermöglicht verzögertes Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!