Anzeige

jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?

jQuery einbinden und diverse Plugins samt Scripte zusammenfassen? | PSD-Tutorials.de

Erstellt von patrick_l, 01.12.2014.

  1. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    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
     
    Zuletzt bearbeitet: 01.12.2014
    #1      
  2. lachender_engel

    lachender_engel Aktives Mitglied

    Dabei seit:
    23.03.2009
    Beiträge:
    1.295
    Geschlecht:
    männlich
    Ort:
    Die Welt
    Software:
    Adobe Creative Suite CS6 Design & Web, Notepad++, IrfanView, Jetbrains PhpStorm
    Kameratyp:
    Nikon D7200
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    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.
     
    #2      
    patrick_l gefällt das.
  3. noltehans

    noltehans Aktives Mitglied

    Dabei seit:
    02.06.2009
    Beiträge:
    558
    Geschlecht:
    männlich
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    #3      
    patrick_l gefällt das.
  4. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    789
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    Da werde ich mich mal dranhängen. ;-)

    Ich stelle mir nämlich die Frage auch seit Kurzem.
     
    #4      
  5. msa1989

    msa1989 Bin da

    Dabei seit:
    24.11.2007
    Beiträge:
    163
    Geschlecht:
    männlich
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    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:
    1. <?php
    2. function mergeJSsources($cache_file, $js_sources){
    3.    $filepointer = fopen($cache_file,"w+");
    4.    $js_content = '';
    5.    foreach ($js_sources as $js_file) {
    6.      $js_content .= file_get_contents($js_file);
    7.    }
    8.    $js_content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $js_content);
    9.    $js_content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '  ', '  '), '', $js_content);
    10.    fwrite($filepointer, $js_content);
    11.    fclose($filepointer);
    12. }
    13. ?>
    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.
     
    #5      
    patrick_l gefällt das.
  6. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    jQuery einbinden und diverse Plugins samt Scripte zusammenfassen?
    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.

    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
     
    #6      
Seobility SEO Tool
x
×
×