Angular6.0ではコンポーネントの遅延読み込み機能を実装（コード添付）

今回は angular6.0 のコンポーネントの遅延ロード機能 (コード付き) を紹介します。 angular6.0 がコンポーネントの遅延ロードで実装する 注意事項 は何ですか? 以下は実際的なケースです。

サードパーティの制御ライブラリを使用する場合、1 つまたは少数のコンポーネントしか使用しないため、無駄なものが多くなり、ボリュームが肥大化します。または、ホームページが多くのコンポーネントを使用しており、ホームページの読み込み速度が遅い場合、ユーザーが下にスクロールするにつれて、これらのコンポーネントを再度読み込んで、ユーザーの視覚範囲内で使用されるコンポーネントを読み込む必要がある場合があります。プログレッシブ エクスペリエンス。現時点では、このツールによって実装された機能を使用できます。あるいは、サードパーティの広告や重要でない要素など、ページの一部の重要でない領域では、遅延読み込みと遅延レンダリングを使用して、ユーザーの最初の画面の待ち時間を短縮できます。すべてはユーザーが知らないうちに起こります。ユーザー エクスペリエンスが大幅に向上します。特に中規模および大規模プロジェクトの場合、最適化は必須です。

プロジェクトアドレス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);
}

遅延読み込みコンポーネントデモを定義

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 中国語 Web サイトの他の関連記事へ!

推奨読書:

AJAX を介した jQuery エンコード変換の Base64 アップロード

vue コンポーネントの記述仕様

以上がAngular6.0ではコンポーネントの遅延読み込み機能を実装（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。