Angular6.0 implémente la fonction de chargement paresseux des composants (code ci-joint)

Cette fois, je vais vous présenter la fonction de chargement paresseux des composants dans angulaire6.0 (avec code). Quelles sont les précautions pour implémenter la fonction de chargement paresseux des composants dans angulaire6.0. un cas pratique, jetons-y un coup d'oeil une fois.

Nous rencontrons souvent un tel problème. Lorsque nous utilisons une bibliothèque de contrôle tierce, nous n'utilisons qu'un ou quelques composants, ce qui entraînera beaucoup de choses inutiles, rendant le volume trop gonflé. Ou bien la page d'accueil utilise de nombreux composants et la vitesse de chargement de la page d'accueil est lente. À ce stade, nous devrons peut-être charger les composants utilisés dans la portée visuelle de l'utilisateur. Au fur et à mesure que l'utilisateur fait défiler vers le bas, nous chargerons à nouveau ces composants et les chargerons progressivement. . Expérience progressive, vous pouvez à ce moment utiliser les fonctions implémentées par cet outil. Ou encore, certaines zones sans importance d'une page, telles que des publicités tierces ou des éléments sans importance, peuvent utiliser un chargement et un rendu différés pour réduire le temps d'attente du premier écran de l'utilisateur. Tout se passe sans que l'utilisateur le sache. Améliore considérablement l'expérience utilisateur, en particulier pour les projets de moyenne et grande taille, l'optimisation est indispensable !

Adresse du projet github

Installer

yarn add iwe7-lazy-load

Utiliser

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);
}

Définir la démo du composant de chargement paresseux

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;
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Téléchargement de la conversion d'encodage jQuery en base64 via AJAX

Spécification d'écriture du composant Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!