Angularモジュールの遅延読み込みがChromeで機能するかどうかを確認する方法は？
Chrome dev toolsを使用して開いたモジュールに対して、jsファイルが遅延ロードされているかどうかをどのように確認しますか？
正しい他の回答に加えて、Auguryツールを使用して、どのモジュールとコンポーネントを遅延して読み込むかを決定できます Angular Augury は、A Chromeおよびデバッグ用のFirefox Dev Tools拡張機能ですAngularアプリケーション。
- インストールしてangularアプリを実行したら、開発者ツールに移動してAuguryタブをクリックすると、最初は次のようにコンポーネントツリーが表示されます。
- 次に、Router Treeタブをクリックします。これは、動的にロードされるモジュール/コンポーネントと次のように遅延読み込み：
Auguryはまた、Angular開発者がコンポーネントツリーと視覚的なデバッグツールを使用してアプリケーションを視覚化するのに役立ちます。開発者は、アプリケーションの構造、変更の検出、パフォーマンスの特性を即座に把握できます。
これを確認するには多くの方法があります。
Ng serveの後、モジュールのチャンク（遅延読み込みが適用される）がターミナルに表示されます。 ファイルのチャンクを示す画像
ルーターツリーの下のAngular auguryでは、遅延ロードされたモジュールの（[lazy]）が表示されます。ただし、そのモジュールをapp.module.tsにインポートしていないこと、または独立したモジュールを不必要にインポートしていないことを確認してください。これらのファイルが読み込まれるためです（読み取りポイント3）。
Web開発者ツールで、ファイル/コンポーネント（遅延読み込みが適用される）を探します。モジュールのロード前であってもファイルが存在する場合、遅延ロードは機能しません（モジュールがロードされる前にコンポーネントが表示されるべきではありません）。そのモジュールがロードされた後、同じファイルが表示されます。
プロジェクトに1つのモジュールが含まれているとしましょう-> abc.module.ts abc.module.tsには2つのコンポーネントabc1.component.tsとabc2.component.tsが含まれています。遅延読み込みが機能している場合、abc1とabc2は検索結果に表示されません。 Web開発者ツールでのファイルの検索（abcモジュールのロード前）。 abcモジュールを読み込んだ後、もう一度検索すると表示されます。