Was sollte ich in meine Polymer App Shell aufnehmen?

Question

Ich fange an, in der Progressive Web App Umgebung zu wohnen, ich benutze ASP.NET 4.6 und MVC5 für die Likes mit einer Polymer Single Page App. Ich habe mich gefragt, was ich in meine App Shell aufnehmen sollte?

Bisher habe ich den App-Standort, App-Route, App-Toolbar, App-Drawer-Layout, mit Polymer vulkanisiert. Die Dateigröße beträgt 266 KB und ich injiziere das HTML inline beim ersten Laden.

Dies lädt nur die Navigationsleiste visuell laden. Die Navigationsleiste benötigt ein Papier-Tab-Element und mein benutzerdefiniertes Login-Element. Sollte ich sie in die erste Ladung aufnehmen?

Alles andere ist faul geladen.

Answer 1

Hier ist ein Beispiel für das, was ich in meiner vorherigen Antwort erklärt habe.

Nehmen wir an, Sie haben ein Element namens lazy-element erstellt, das Sie faul laden möchten. Es befindet sich unter http://example.com/lazy-element.html. Hier ist ein Weg, wie Sie es laden können.

Referenz Lazy-Element in Ihrem aktuellen Element.

<lazy-element></lazy-element> 

Wenn Ihr Projekt geladen wird, wird dieses Element nichts tun, da es noch nicht geladen wurde. Also, lasst uns eine Funktion erstellen, um es zu laden. Fügen Sie diese Funktion irgendwo in Ihrem Projekt ein (möglicherweise als private Funktion in dem Element, von dem wir faul laden).

_loadElement: function(pathToElement) { 
    this.importHref(pathToElement, function() { 
    console.log(pathToElement + ' loaded'); 
    }.bind(this), function() { 
    console.warn(pathToElement + ' failed to load'); 
    }.bind(this)); 
} 

Nun nennen diese Funktion Laden lazy-Element wenn Sie lazy-Element wollen in Ihrem Projekt zu aktivieren. Vielleicht möchten Sie, dass es 5 Sekunden nach der Fertigstellung Ihres Projekts aktiviert wird.

ready: function() { 
    window.setTimeout(function() { 
    this._loadElement('http://example.com/lazy-element.html'); 
    }, 5000); 
} 

Answer 2

Fügen Sie einfach Dinge ein, die Sie verwenden werden. Wenn du etwas nicht hast, dann füge es einfach hinzu, wenn du merkst, dass du es brauchst.

Wenn Sie wirklich anspruchsvoll werden möchten, können Sie Polymerelemente mit this.importHref faul laden. Allerdings müssen Sie beim Laden von Elementen vorsichtig sein, da sie von anderen Polymerelementen abhängen können, die am Ende lazy loaded sind und eine lange Kette von Elementen erzeugen, die geladen werden müssen.

Versuchen Sie, Elemente, die Sie häufig beim ersten Laden der App verwenden, und Lazy Load-Elemente, die nur einmal oder zweimal an bestimmten Orten in der App verwendet werden, beizubehalten.