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

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

角度印刷ページの指定された機能

Reactでのレンダーケースの詳細な説明

以上がAngular6.0 では遅延読み込みが可能になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。