Angular6.0 permet un chargement paresseux

Cette fois, je vais vous présenter comment implémenter le chargement paresseux dans angulaire6.0. Quelles sont les précautions à prendre pour le chargement paresseux dans angulaire6.0. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 :

Fonction spécifiée pour la page d'impression angulaire

Explication détaillée du cas de rendu dans React

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!