如何檢查或證明angular2中的模塊是否被延遲加載？

如果我有權訪問一個angular2應用程序的代碼，並且有一個模塊被認爲是延遲加載的，有沒有辦法獨立於檢查代碼，我可以測試該模塊以查看它是否被延遲加載。如果有必要並且沒有其他方法，我可以將代碼添加到有問題的模塊中進行測試，如果這是可能的話。但是我會添加什麼代碼？如何檢查或證明angular2中的模塊是否被延遲加載？

來源

2017-02-25 Reid

你可以嘗試添加一個'的console.log（ 'XXX'） '給模塊類的構造函數，並檢查它何時被調用（還沒有嘗試過）。 –

在導航到延遲加載的模塊之前清除網絡活動，如果加載了女士，則將加載該模塊所需的文件。 –

檢查網絡 Google Chrome瀏覽器中的Chrome開發工具（ctrl + shift + i）選項卡。

如果您的模塊沒有被延遲加載，您將在網站第一次加載時在網絡選項卡中看到一行模塊。

如果它正在被延遲加載正確，那麼只有當您導航到相應的路線時，纔會看到該模塊的行。

希望這會有所幫助。

來源

2017-02-28 19:10:20 Jim

謝謝。我還沒有能夠測試這個答案讓我滿意，但是當我有時我會再次回顧。 – Reid

您能否提供一個關於網絡流量如何看的截圖？會很好！ –

我也想檢查一下。我查看了Network選項卡，但在一個整合的Angular 2開發環境中，這些文件被加載到'bundle.js'中。因此無法區分哪些文件被加載（至少我是這麼認爲的）。我甚至嘗試過使用小提琴手，但它顯示了相同的「捆綁」結果。 OP的問題是否有其他選擇？ –

背景概念： 首先，有一件事需要清楚延遲加載。當你延遲加載時，它基本上將你的模塊加載到內存（RAM）中，而不是從網絡或服務器中加載。模塊（js腳本）已經存在於瀏覽器緩存（HD）中 - 在應用程序加載期間從網絡獲取。因此，通過延遲加載特定模塊有助於內存優化，而不是網絡優化。

如何檢查：只要把在的console.log模塊類定義的構造函數

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

來源

2017-08-16 03:01:01

如何檢查或證明angular2中的模塊是否被延遲加載？

回答

相關問題