Ionic 3 Lazy Loading machen Verzögerung mit großen HTML-Datei

Question

Ich bin mit ionischen 3 in meinem Projekt und ich habe ein paar Probleme mit der Lazy Load.

Ich habe eine ResultPage mit der Vorlage resultpage.html mehr als html Zeilen Code. In der HomePage möchte ich zu ResultPage von navCtrl.setRoot navigieren. Wenn ich es anrufe, friert der Bildschirm in 3-4 s ein, bevor Sie mich zum ResultPage bringen. Es ist wirklich eine schlechte UX. Es passiert nur mit Lagre Teamplate und beim ersten Mal betrete ich diese Seite. Ich beschließe, die Lazy Load in ResultPage zu entfernen und die Verzögerung zu verschwinden. Ich weiß nicht, ist es ein richtiger Weg? Kann mir bitte jemand sagen, was ich in diesem Fall machen soll?

Vielen Dank!

Answer 1

Eine Möglichkeit, das vor dem Benutzer zu verbergen, wäre, in Ihrer App immer noch Lazy Load zu verwenden, aber preloading begierig diese bestimmte Seite. Sie können einen Blick auf the docs für weitere Informationen werfen.

standardmäßig Vorbelastung wird so ausgeschaltet Einstellung dieser Eigenschaft würde nichts tun. Beim Vorladen werden alle Deep-Links geladen, nachdem die Anwendung bei Bedarf gestartet wurde. So aktivieren Sie Vorbelastung eingestellt preloadModules im Hauptanwendungsmodul config true:

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp, { 
     preloadModules: true // <- Here! 
    }) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ] 
}) 
export class AppModule { } 

Wenn Vorbelastung eingeschaltet wird, werden die Module geladen werden, basierend auf dem Wert der Priorität. Folgende Werte sind für die Priorität möglich: "high", "low" und "off". Wenn keine Priorität vorhanden ist, wird sie auf "niedrig" gesetzt.

Alle Deep-Links mit ihrer Priorität "high" werden zuerst geladen. Nach der Fertigstellung werden die „hohe“ Priorität Module laden, alle Deep-Links mit einer Priorität von „low“ (oder ohne Priorität)

die Prioritätseinstellung geladen ist so einfach, wie es zu den @IonicPage Dekorateur vorbei :

@IonicPage({ 
    name: 'my-page', 
    priority: 'high' 
}) 

in Ihrem Fall also würde ich durch Setzen der Priorität hoch versuchen:

• die ersten Seiten, dass der Benutzer w Wenn die App geladen wird (zum Beispiel die HomePage)

• Die ResultPage, um es bereits vorgeladen zu halten und es schneller anzuzeigen, wenn der Benutzer darauf umgeleitet wird.

Bitte beachten Sie, dass Vorbelastung Seiten eifrig die Startzeit Ihrer Anwendung erhöhen können, so versuchen, Seiten so wenig wie möglich vorab zu laden.