Lade Haupt-Javascript auf jeder Seite? Oder in relevante Seiten aufteilen?

Ich habe eine 700kbdekomprimierte JS-Datei, die auf jeder Seite geladen wird. Bevor ich 12Javascript-Dateien auf jeder Seite hatte, aber um http-Anfragen zu reduzieren, habe ich sie alle in komprimiert 1 file.

Diese Datei ist ~130kb gzippedund wird zugestellt gzip. Auf dem lokalen Computer wird es jedoch weiterhin auf jeder Seite entpackt und geladen. Ist das ein Leistungsproblem?

Ich habe das Javascript mit dem Firebug-Profiler profiliert, aber keine Probleme festgestellt. Das Problem / die Illusion, vor dem ich stehe, ist, dass in dieser Datei JQuery-Bibliotheken komprimiert sind, die manchmal auf der aktuellen Seite nicht verwendet werden.

Zum Beispiel datatablesist jquery 200kb komprimiert und das wird nur auf 2 meiner Webseiten geladen. Ein anderer ist jqplotund das ist ein anderer 200kb.

Ich habe jetzt 400kbüberschüssigen Code, der nicht auf 80%den Seiten ausgeführt wird.

Soll ich alles in einer Datei belassen?

Sollte ich die jquery-Bibliotheken herausnehmen und nur relevante JS auf der aktuellen Seite laden?

Mit requirejs können Sie die Bibliotheken, die Sie nur auf diesen Seiten benötigen , dynamisch laden. Dann müssen Sie nur die erforderlichen Dateien (ca. 14 KB) auf alle Seiten laden und ca. 385 KB einsparen.

Die Integration ist ebenfalls sehr einfach: Packen Sie einfach den Code, den Sie haben, in das erforderliche Include-Material:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Wenn Ihr Framework / CMS / whatever über die entsprechenden Funktionen verfügt, können Sie das Scripting unter bestimmten Bedingungen einbinden, wie von @Michael vorgeschlagen, jedoch ohne die zusätzliche Bibliothek.

Wenn Sie zum Beispiel Ihren Fall mit Datentabellen betrachten, könnte WordPress die Situation folgendermaßen behandeln:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

Es ist nichts falsch mit RequireJS; Sie müssen nur abwägen, ob die zusätzliche Komplexität (und das Erlernen der ersten Verwendung) die Vorteile der verfügbaren Tools für Sie zunichte macht. Wenn Sie nur die beiden oben genannten Fälle haben, ist dies möglicherweise eine bessere Option. Wenn Sie viel mehr vorhaben, ist RequireJS im Großen und Ganzen möglicherweise die bessere Lösung.

700 KB JavaScript ist ein Leistungsproblem, da es nach dem Laden der Seite analysiert werden muss. Aus diesem Grund sollten Sie darauf achten, dass nur die benötigten Skripte geladen werden. Bei vollständigen AJAX-Sites wie GMail ist möglicherweise ein großes JavaScript in Ordnung, wenn die Navigation intern ausgeführt wird, ohne die einzelne Seite zu verlassen. Sogar vollständige AJAX-Sites führen jedoch ein dynamisches JS-Laden durch, um zu verhindern, dass beim Start unnötiges JS geladen wird (sowohl Speicher- als auch Geschwindigkeitsprobleme).

Sie haben gesagt, Sie wollten den HTTP-Verkehr reduzieren. Sie sollten mit HTTP-Caching spielen . Das Problem ist, dass die Änderungen am JS möglicherweise erst sichtbar werden, wenn der Cache abläuft, wenn Sie die Ablaufzeit zu hoch eingestellt haben.

Es gibt jedoch einen Trick, auf den Sie sich nicht beziehen myscript.js, sondern myscript.js?version={myversion}. Nach dem Update der Anwendung ändern Sie das {myversion}und Sie erzwingen das erneute Laden von JavaScript.

~ 700 KB JavaScript sind ein Leistungsproblem und wenn es komprimiert ist, müssen die Regeln beachtet werden, die bei der Optimierung des Codes zu beachten sind:

1. Javascripts minimieren - Sie komprimieren und dekomprimieren, ohne den Code zu reduzieren. Verwenden Sie zunächst das gute Minify JS-Tool und minimieren Sie Ihren Code. Sie haben 12 Dateien und jede Datei würde einzeln verkleinert, bevor Sie für die beste Leistung auf einen Club gehen.

2. Verwenden Sie das asynchrone Laden von Javascript , indem Sie das asynchrone Laden verwenden. Dies führt zu einer sehr schnellen Ladezeit und zum Rendern der Seite. Die Auswirkung auf den Benutzer ist sehr stark, da das gute asynchrone Laden den Rendervorgang nicht blockiert und die empfundene Ladezeit der Seite stark verringert wird. Bilder und andere angezeigte Artikel werden regelmäßig angezeigt, da kein Javascript geladen ist.

3. Verwenden Sie GOOGLE cdn für JQUERY . Ich denke, Sie verwenden JQUERY und laden es von Ihrer eigenen Website, was ebenfalls ein Nachteil ist. Verwenden Sie bitte GOOGLE CDN ​​(kostenlos), um die JQUERY zu laden. Da es von fast jeder 3. Website genutzt wird und somit bereits auf dem Clientcomputer im Cache vorhanden ist.

4. Benutzerdefinierte Header für lange Abläufe : Wenn die Website mit dem Problem der Ladezeit geladen wird, müssen Sie die Werte für lange Abläufe für HTTP-JS-Dateien angeben, damit sie nicht jedes Mal heruntergeladen werden können, was die Anforderung für das zweite Mal verringert. Nach meinen Recherchen hat die Ladezeit auf der zweiten Seite mehr Abbrüche als beim ersten Seitenaufruf.

5. Mit Seitengeschwindigkeit prüfen: Manchmal wirken sich auch andere Ressourcen auf die Ladegeschwindigkeit der Seite aus und versuchen, auch andere Ressourcen zu optimieren. Geben Sie unserem JS-Laden eine zusätzliche Zeit, da Sie bei jeder Ressource einen kleinen Schritt tun.