今回は 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 サイトの他の関連記事にも注目してください。
推奨読書:
以上がAngular6.0 では遅延読み込みが可能になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。