jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?

[patrick_l]

Hi allerseits,

bei einem aktuellen Projekt nutze ich einige auf jQuery aufsetzende Plugins. Die würde ich gerne zusammenfassen. Einmal der Performance wegen, aber auch um Requests zu reduzieren und den Quellcode nicht unnötig aufzublähen. Stehe etwas auf dem Schlauch und daher jetzt hier mal höre, welche Vorschläge ihr zu parat habt. Es geht vor allem um folgende Plugins:

bootstrap, respond, prefexfree, easing, scrolling-nav sowie die simple-fade-slideshow. Alle andere Scripte werden so oder so von außen eingebunden. Daher keine bzw. eine untergeordnete Rolle spielen. Wäre also super wenn mir einer von euch etwas auf die Sprünge helfen würde/könnte. Mich interessiert auch ob und welche Erfahrungen ihr mit dem Closure Compiler von Google gemacht habt. Welche Mittel setzt ihr ein? Zeit ist ist Geld und will wenn nicht zwingenden notwendig den händischen Weg sparen.

Zur Website selbst, wird ne OnePage-Site mit zwei Unterseiten. Aufgesetzt ist/wird das ganze auf WordPress mit diversen Anpassungen. Markup vom laufenden Projekt kann ich jedoch nicht posten.

LG Patrick

 

[lachender_engel]

Du willst alle Skripte konsolidieren?
Wenn ich das richtig verstehe, dann speichere sie alle in der Reihenfolge, in der sie normalerweise einzeln laden, in eine einzelne Datei. Und stelle sichere, dass Du eine jQuery-Version nimmst, mit der alle Skripte laufen.

Um die Ladezeit zu optimieren setze noch einen Minify-er einer. Ich nutze dazu zum Beispiel den hier oder den hier.

 

[noltehans]

Hi Patrick,

schau dir einmal HeadJS an.
http://headjs.com/

 

[dn3d_fanboy]

Da werde ich mich mal dranhängen. ;-)

Ich stelle mir nämlich die Frage auch seit Kurzem.

 

[msa1989]

Ich hab mir für sowas eine PHP-Funktion geschrieben. Google Page Speed meckert allerdings je nach Projekt bisher, dass 1 - 2% zusätzlich noch eingespart werden könnten.

<?php
function mergeJSsources($cache_file, $js_sources){
   $filepointer = fopen($cache_file,"w+");
   $js_content = '';
   foreach ($js_sources as $js_file) {
     $js_content .= file_get_contents($js_file);
   }
   $js_content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $js_content);
   $js_content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '  ', '  '), '', $js_content);
   fwrite($filepointer, $js_content);
   fclose($filepointer);
}
?>

Für den Abruf des Codes hab ich je nach Seite verschiedene Vorgehensweisen. Wenn sich die Quell-Dateien nicht oft ändern, dann ist das vorgehen relativ einfach. Die Variable $cache_file enthält einen festen Pfad. z.B.: '/cache/myfile.min.js'. Vor jedem Seitenaufruf wird geprüft ob die Datei existiert und wie alt sie ist. Existiert die Datei nicht bzw. ist Sie zu alt, dann werden in ein Array ($js_sources) alle Pfade (in der richtigen Reihenfolge) zu den JS-Dateien geladen. Anschließend wird die Funktion "mergeJSsources" aufgerufen und die JS-Datei generiert.
Auf der eigentlichen Homepage gibt's nur den Link zu dieser temporären Datei. Dasselbe praktiziere ich mit CSS-Dateien.

 

[patrick_l]

Ich danke euch. Werde mir eure Lösungen genauer anschauen. Habe jetzt eh das Markup etwas angepasst und die Plugins an sich reduziert. Jetzt eigentlich nur noch die Slideshow, ScrollTo sowie jQuery direkt eingebunden. Meine Scripte komprimiert.

Und stelle sichere, dass Du eine jQuery-Version nimmst, mit der alle Skripte laufen.

Das sowieso. Alle Scripte, seien es meine oder die von Dritter laufen mit der aktuellsten Version. Vor dem Launch wird eh alles nochmal getestet. Gibt ja hier und da Unterschiede zwischen lokaler Serverumgebung und Server/Webspace. Primär was LESS angeht.

Wie gesagt, danke euch erst mal.

LG Patrick