2017-02-25 6 views
2

私がangle2アプリケーションのコードにアクセスでき、遅延ロードされていると思われるモジュールがある場合、そのモジュールをテストして遅延ロードされているかどうかを調べる方法があります。必要であれば他の方法はありませんが、可能であれば、問題のモジュールにコードを追加してテストすることができます。しかし、私はどのようなコードを追加しますか?クロームのdevのツール(CTRL +シフト+ I)Google Chromeブラウザでのどのようにして、angular2のモジュールが遅延ロードされているかを確認することができますか?

+3

のコンストラクタ関数ではconsole.logを置きます'をモジュールクラスのコンストラクタに渡し、呼び出されたときにチェックします(まだ試していません)。 –

+0

遅延ロードされたモジュールにナビゲートする前にネットワークアクティビティをクリアして、ロードされている場合は、そのモジュールに必要なファイルがロードされます。 –

答えて

0

チェックネットワークタブ。

モジュールが遅延ロードされていない場合は、サイトが最初にロードされるときに、ネットワークタブにモジュールの行が表示されます。

適切に遅延ロードされている場合は、対応するルートに移動したときにのみモジュールの行が表示されます。

これが役に立ちます。

+0

ありがとうございます。私はこの答えを私の満足のためにテストすることができませんでしたが、私が持っているときには再訪するでしょう。 – Reid

+0

ネットワークトラフィックがどのように見えるかをスクリーンショットでお知らせください。素晴らしいことだ! –

+0

これもチェックしたかったです。ネットワークタブを見ましたが、統合されたAngular 2開発環境では、ファイルは 'bundle.js'で読み込まれます。したがって、どのファイルが読み込まれているかを区別することはできません(少なくとも私はそう考えています)。私はフィドラーを使ってみましたが、同じ「バンドルされた」結果を示しています。 OPの質問に代わるものはありますか? –

1

バックグラウンド概念: まず、遅延読み込みについて明確にする必要があります。遅延ロードすると、基本的に、ネットワークまたはサーバーからではなく、メモリ(RAM)に遅延ロードされます。ブラウザキャッシュ(HD)に既に存在するモジュール(jsスクリプト) - アプリの読み込み中にネットワークから取得しました。したがって、特定のモジュールを遅延ロードすることによって、ネットワークの最適化ではなく、メモリの最適化に役立ちます。

どうかを確認する方法

:あなたは `にconsole.log( 'XXX')を追加してみてくださいすることができますただ、モジュールのクラス定義

import { NgModule } from '@angular/core'; 
 

 
import { LazyComponent } from './lazy.component'; 
 
import { LazyService } from './lazy.service'; 
 

 
@NgModule({ 
 
    imports: [ ], 
 
    declarations: [ LazyComponent ], 
 
    providers: [LazyService] 
 
}) 
 

 
export class LazyModule { 
 
    constructor() { 
 
    console.log('Lazily Loaded : LazyModule'); 
 
    } 
 
}

関連する問題