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

13

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?

Kyle
quelle
Wenn Sie über 700 KB JS-Code verfügen, sollten Sie ihn wirklich neu aufteilen und nur die Skripte einschließen, die Sie wirklich benötigen. Bei Verwendung von jQuery ("... weniger schreiben, mehr tun ...") scheint es ein bisschen übergroß zu sein, solch eine riesige JS-Datei zu haben. Was zum Teufel machst du mit so einer Masse von JS?
Feeela
@feeela werfen Sie einen Blick auf jquery-ui, jquery.datatables. Diese alleine sind zusammen 400kb. Ich habe andere Plugins, die ich auch benutze, wie jquery.validate, jquery.uniform - dieses Zeug summiert sich. xD
Kyle
In diesem Fall sollten Sie - wie unten erwähnt - die Skripte wirklich aufteilen und nur das laden, was benötigt wird…
feeela

Antworten:

6

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();
    });
})
Michael
quelle
1
Ich mag das Website-Design sehr. Ich habe noch nie von RequirementJS gehört. Wie bewerten Sie dies über http-Anfragen? Setzt dies nicht mehr http-Anfragen auf die Seite? (Ist das nicht schlimm?) Entschuldigung für meine dummen Fragen.
Kyle
Es ist natürlich besser, weniger Anfragen zu haben, aber es ist auch nicht schlecht, mehr als 350.000 zu sparen. Ja, Ihre Site stellt eine weitere Anfrage, wenn Sie eine andere Bibliothek auf dieser Seite einfügen. Wenn es datatablesauf einer Website und jqplotauf einer anderen ist, ist das in Ordnung. Das Laden von fünf weiteren Bibliotheken auf 50% der Seiten würde den Vorteil zunichte machen, stimme ich zu. Aber in Ihrem Fall halte ich es für eine sehr gute Lösung (vorausgesetzt, der Rest von Ihnen bleibt eine komprimierte Datei).
Michael
Danke Michael. Diese Lösung ist ziemlich genial. Vorher wollte ich alles auf einer Seite aufteilen, aber das ... Das ist besser als das, was ich mir vorgestellt habe. Vielen Dank für diesen Vorschlag. Glaubst du, da du mit requirejs vertraut bist, würde requirejs ausreichen? Ich sehe auf einigen Websites, dass sie Google verwenden, um ihre jquery und andere Bibliotheken zu laden google.load('...').
Kyle
1
Ich empfehle dringend, allgemeine Bibliotheken von Google (oder anderen Websites, die diese anbieten) zu laden. Dies hat zwei Vorteile: a) Die lib-Datei wird zwischen verschiedenen Sites zwischengespeichert. Es besteht die Möglichkeit, dass der Nutzer zuvor eine Website besucht hat, die auch die von Google geladene Abfrage verwendet. Diese Datei wird dann aus dem Cache geladen, nicht erneut vom Server! b) Auch wenn es hat geladen werden, wird es viel schneller sein , es von Google CDN zu laden, als von einem eigenen Webserver.
Michael
8

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.

Su '
quelle
Ich habe eine benutzerdefinierte Website, die ich aus einer HTML-Vorlage erstellt habe, die ich aus themeforest gekauft habe. Das einzige Problem ist, dass der Typ ungefähr 6 JS-Dateien hatte, die verstreut waren und es war chaotisch. Also habe ich diese in eine Datei gelegt und diese enthält einige Bibliotheken, jqplot, datatables, jquery-ui. Diese summieren sich auf ungefähr 550-600kb. 100 kb sind meine JS, die diese Bibliotheken verwendet. Ich habe das Gefühl, ich sollte das Problem beheben, anstatt auf jeder Seite so viele irrelevante JS-Bibliotheken zu laden. Danke für deinen Vorschlag! =)
Kyle
5

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.

Donau Seemann
quelle
Ja, bei dieser Größe von JS und der Tatsache, dass es sich meistens um recht verbreitete Bibliotheken handelt, wird die Verwendung eines CDN ein großer Vorteil sein.
Zhaph - Ben Duguid
1

~ 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.

Vineet1982
quelle