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

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

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