角度遅延負荷のためのネットワーク意識プリローディング戦略

14747 ワード
performance angular lazyloading typescript テキストリンク
このポストは角度ルータの遅延負荷のためのネットワーク意識プリローディング戦略を作る方法を説明した.
ユーザーのネットワーク条件にもかかわらず、怠惰な負荷でユーザーエクスペリエンスを向上させることができます.

プリロードとは何か


プリロードは角度ルータの遅延負荷の重要な特徴である.2.1.0以降で利用可能です.
既定では、アプリケーションが遅延負荷を使用した場合loadChildren , チャンクされた怠惰なモジュールはオンデマンドでロードされます.これは初期のバンドルサイズを減らすことができますが、ユーザーは移行時にチャンクの読み込みを待つ必要があります.
プリロードの変更.プリローディングによって、アプリケーションは必要に応じてモジュール化されたモジュールをロードし始めます.これはスムーズな移行とユーザーエクスペリエンスを向上させることができます.
ここでは最初にビクターサクキンによる角度でプリローディングについてお読みください最高の記事です.彼はその特徴の著者だ.
Angular Router: Preloading Modules

プリロード戦略


アングルルータはプリロード挙動をカスタマイズするPreloadingStrategy 機能.つの組み込み戦略がありますPreloadAllModules and NoPreloading .NoPreloading 任意のモジュールをプリロードしない既定の動作です.PreloadAllModules ブートストラップの直後にすべての怠惰なモジュールをロードします.言い換えれば、これは「できるだけ早く」戦略です.
import { RouterModule, NoPreloading, PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules, // or NoPreloading
    }),
  ],
})
class AppRoutingModule {}
PreloadingStrategy を実装する単純なクラスオブジェクトですpreload メソッド.それで、我々は以下のように簡単にカスタムプリローディング戦略を作ることができます.
The preload メソッドは2つの引数をとりますroute and load . route で宣言するルートオブジェクトですroutes 配列.load モジュールをロードするトリガ関数です.
// custom-preloading-strategy.ts
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, EMPTY } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (shouldPreload(route)) {
      return load();
    } else {
      return EMPTY;
    }
  }
}

// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: CustomPreloadingStrategy,
    }),
  ],
})
class AppRoutingModule {}

プリロード問題：ネットワークのコスト


プリローディングは、ユーザーエクスペリエンスを向上させることができますが、それはデバイスが十分に高速ネットワークで使用する場合のみです.時々、モバイルデバイスは狭帯域ネットワーク接続を有する.アプリケーションがすべてのモジュールを早送りさせようとすると、AJAXのような他の接続に悪影響を及ぼします.
プリローディングは、強力なネットワークを持つユーザーの適切なソリューションです.彼らがそうしないならば、オンデマンドローディングはよりよいです.しかし、この条件は非常に動的に変更することができますので、アプリケーションの実行時にネットワーク情報を取得し、オン/オフプリローディングをオンにする必要があります.
私は、「ネットワークを意識したプリローディング戦略」と呼びます.

ネットワーク情報APIの使用


Network Information API は新しいWeb標準API提案です.ネットワーク情報APIは、システムの接続に関する情報を提供します.
API全体は、NetworkInformation インタフェースとNavigator インタフェースNavigator.connection . このAPIはまだ標準ではないので、typescriptはその型定義を持っていません.だから私はnetwork-information-types パッケージとそれは以下のすべての例のコードで使用されます.

ラコラコ / ネットワーク情報型


ネットワーク情報APIの型定義


ネットワーク情報型



型定義Network Information API

警告


これはtypescriptが組み込み型としてAPIをサポートするまで一時的な解決です.参照https://github.com/Microsoft/TypeScript/issues/27186 .

用途

  • 経由でパッケージをインストール
  • TSconfigを編集します.JSON
  • 今得るnavigator.connection そのタイプで!

    • インストール

    $ yarn add -D network-information-types

    TSconfigJSON

    network-information-types is a ambient types that modify global navigator type, so it MUST be added in types.

    Package names in types array are resolved with typeRoots. By default, typesRoots is just ./node_modules/@types To resolve network-information-types package, add the relative path directly as below.

    {
  "compilerOptions": {
    ...
    "types": [
        "./node_modules/network-information-types"
    ]
  }
}

    型を使用する

    Now you can access navigator.connection property as NetworkInformation object.

    navigator.connection and its properties are all optional because browser support for each is separated See https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation#Browser_compatibility .

    // Example: http://wicg.github.io/netinfo/#example-1
if (navigator.connection)
    …
    View on GitHub

    ネットワーク意識型プリロード戦略の構築

    Let's make network-aware preloading strategy with Network Information API! The following code defines shouldPreload function that is used in the above CustomPreloadingStrategy example.

    navigator.connection is landed in limited browsers. So we MUST detect the feature. In this case,

    export function shouldPreload(route: Route): boolean {
  // Get NetworkInformation object
  const conn = navigator.connection;

  if (conn) {
    // With network information
  }
  return true;
}

    検出データの保存


    まず、“保存データ”モードを優先順位付けする必要があります.それは、ユーザーが彼らのコストまたはパフォーマンス制約のためにペイロードサイズについて強く気にかけることを意味します.用途NetworkInformation.saveData プロパティとリターンfalse .
    export function shouldPreload(route: Route): boolean {
  // Get NetworkInformation object
  const conn = navigator.connection;

  if (conn) {
    // Save-Data mode
    if (conn.saveData) {
      return false;
    }
  }
  return true;
}

    接続の検出


    ネットワーク情報APIは、ネットワークの効果的な接続タイプを認識できます4 G、3 G、2 G、スロー2 G.
    このサンプルでは、アプリケーションがユーザーが2 Gネットワークにあるとき、プリローディングを無効にします.
    export function shouldPreload(route: Route): boolean {
  // Get NetworkInformation object
  const conn = navigator.connection;

  if (conn) {
    // Save-Data mode
    if (conn.saveData) {
      return false;
    }
    // 'slow-2g', '2g', '3g', or '4g'
    const effectiveType = conn.effectiveType || '';
    // 2G network
    if (effectiveType.includes('2g')) {
      return false;
    }
  }
  return true;
}
    ネットワーク情報APIにもいくつかの他のプロパティがありますrtt ( RTT ,接続の往復時間).アプリケーションのチェックを追加できます.

    結論

  • 角ルータは2.1.0以降プリロード機能をサポートしています.
  • 独自のカスタムプリロード戦略を作成することができます
  • プリロードは高速ネットワークを持つユーザに対してのみ有効である.

  • ネットワーク情報APIは、いくつかのブラウザで利用可能です.
  • これは非常に簡単にネットワークを意識してプリロードの戦略を作る.
    • 読んでくれてありがとう!
    Programming Language) Week7 -Memory binding & Variable Types
    クラス(メソッドとプロパティ)