Abfangen von HTML-Importen

Question

Ich kann nichts im Web finden. Ich benutze Polymer 1.6 und versuche Lazy Loading der Elemente zu machen. Bisher ist es mir gelungen, Lazy Loading zu laden und die Geschwindigkeit hat sich erheblich erhöht.

Ich mache die App Shell-Architektur, in der ich (durch Minimierung und Vulkanisation) alle Skripte bündle, die für Navbar und Schublade Arbeit benötigt werden. Aber sobald ich das tue, gibt es viele HTML-Importe, die Teil der App Shell sind, die aufgerufen werden, weil sie sich in Namen unterscheiden.

Ich könnte die HTML-Importe von meinen Elementen entfernen, aber das wäre fehleranfällig. Hinweis: Ich weiß, dass HTML-Importe nur einmal ausgeführt werden, aber da sie Teil eines Bundles sind, weiß der Browser nicht, wie er das Laden verhindert.

Also, was ich tun möchte, ist HTML-Importe abfangen, überprüfen Sie, ob das Element Teil der App-Shell ist, und verhindern Sie seine laden, wenn es bereits existiert.

Etwas wie folgt aus:

var appShellComponents : [ 
    'polymer' 
    'my-navbar', 
    'paper-button', 
    'app-drawer' 

    document.addEventListener('HTMLImportEvent', function(event){ 
     //Untested code below 
     var href = event.srcTarget.href; 
     var component = href.substr(href.lastIndexOf('/').replace('.html',''); 
     if(appShellComponents.indexOf(component) > -1){ 
     //Element has been loaded, reject the import. 
      return; 
      } 

    }); 

Ich brauche auch einen Weg, um es mit anderen Browsern wie Firefox zu tun. Anscheinend verwendet Polymer ein Polyfill, das stattdessen AJAX aufruft.

Answer 1

Der beste Weg ist, um die Dateien auf der Server-Seite, mit einem Programm wie schluck oder Grunzen zum Beispiel zu verarbeiten.

Sie könnten das Attribut rel='import' der <link> Elemente mit Ihrem eigenen Namen, zum Beispiel rel='lazy-import', ersetzen und sie dann im Browser mit Ihren eigenen Modul-Lader verarbeiten.

---

Wenn Sie die Links zur Laufzeit auf der Clientseite zu handhaben möchten, können Sie für die onload Veranstaltung auf link (oder die HTMLImportsLoaded auf document) warten konnte, aber ich denke, diese Ereignisse zu abgefeuert werden spät für das, was Sie erreichen wollen (in der Tat hängt es davon ab, wie die verschiedenen Webkomponenten gestaltet sind).

---

jedoch mit dem polyfill (für Firefox und Internet Explorer), könnte es möglich sein, weil Sie den Code Patch kann, die die XMLHttpRequest Anrufe realisiert. Leider funktioniert es nicht für Chrome und Opera, weil die <link> nativ geparst und verarbeitet werden und die <script> in den importierten Dateien sofort ausgeführt werden, wenn sie heruntergeladen werden.

---

konnte Eine Abhilfe sein, um die Web-Komponenten in einem Ordner zu verschieben, so dass sie nicht mit der anfänglichen relativen href URL (oder verwenden Sie ein <base> Element mit einer falschen URL) gefunden werden. Dann müssen Sie einfach gut <link> bei Bedarf einfügen.