이번에는 Angular6.0에서 지연 로딩을 구현하는 방법을 알려드리겠습니다. Ang6.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 중국어 웹사이트의 다른 관련 기사를 확인해보세요!
추천 도서:
위 내용은 Angular6.0은 지연 로딩을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!