집 > 기사 > 웹 프론트엔드 > Angular6.0은 구성 요소 지연 로딩 기능을 구현합니다(코드 포함).

Angular6.0은 구성 요소 지연 로딩 기능을 구현합니다(코드 포함).

php中世界最好的语言원래의: 2018-04-28 14:00:572692검색

이번에는 Angular6.0에서 컴포넌트 지연 로딩 기능을 구현하는 방법(코드 포함)을 알려드리겠습니다. 컴포넌트 지연 로딩 기능을 구현하기 위한 주의사항은 무엇입니까? 다음은 실제 사례입니다. 보세요.

타사 컨트롤 라이브러리를 사용할 때 우리는 하나 또는 몇 개의 구성 요소만 사용하므로 쓸모없는 일이 많아지고 볼륨이 부풀어오르는 문제가 자주 발생합니다. 또는 홈 페이지에서 많은 구성 요소를 사용하여 홈 페이지의 로딩 속도가 느릴 경우 사용자가 아래로 스크롤하면서 사용되는 구성 요소를 다시 로드해야 할 수도 있습니다. 점진적인 경험을 통해 현재 이 도구에서 구현된 기능을 사용할 수 있습니다. 또는 제3자 광고나 중요하지 않은 요소 등 페이지의 일부 중요하지 않은 영역에서는 지연 로딩 및 지연 렌더링을 사용하여 사용자의 첫 번째 화면 대기 시간을 줄일 수 있습니다. 모든 일은 사용자가 모르는 사이에 일어납니다. 특히 중대형 프로젝트의 경우 사용자 경험이 크게 향상되므로 최적화는 필수입니다!

프로젝트 주소 github

설치

yarn add iwe7-lazy-load

사용

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

Define 지연 로딩 구성 요소 데모

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 콘텐츠를 보려면 주의하세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!