mpMinify - minify für CONTENIDO

[xmurrix]

mpMinify 0.1 Beta für CONTENIDO 4.8.x

BESCHREIBUNG

minify ist eine PHP Applikation, die mehrere JavaScript- oder CSS-Dateien kombinieren, komprimieren und mit einem entsprechenden Header ausgeben kann, so dass die Anzahl
der Anfragen (Requests) auf eine Webseite und die versendete Datenmenge reduziert wird.

Mit mpMinify für CONTENIDO kann man die Ausgabe der JavaScript- oder CSS-Dateien im Frontend einer CONTENIDO-Installation optimieren.

Beispiel:
Auf der Webseite werden z. B. 3 JavaScript- und 5 CSS-Dateien eingebunden. Wenn man die Webseite besucht, macht der Browser 8 Anfragen, um die Dateien zu laden und der Server liefert die 8 Dateien aus.

Mit minify kann man es im Idealfall erreichen, dass der Browser nur 2 Anfragen an den Server sendet, jeweils eine für JavaScript und für CSS-Datei.

Bei entsprechender Konfiguration kümmert sich minify darum, die Dateien zusammenzuführen, und zu komprimieren, so dass der Browser wenig Requests hat und der Server weniger Daten versendet.

Anderes Beispiel:
Auch wenn man verschiedene JavaScript- und CSS-Dateien Dateien nicht zusammenführen möchte, ist die Verwendung von minify von Vorteil. Jede einzelne über minify verarbeitete Datei wird von unnötigem Inhalt (Leerzeichen und Kommentare) entfernt und komprimiert, so dass am Ende die Menge der vom Server an den Browser versendeten Daten reduziert wird.

Das Reduzieren der Anzahl der Requests und das Reduzieren der Datenmenge ist sowohl für den Browser als auch für den Server eine übliche Optimierungsmaßnahme.


BEKANNTE PROBLEME

Momentan keine


CHANGELOG

2012-10-26: mpMinify 0.1 Beta (for CONTENIDO 4.8.x)

• First beta release

FEATURES

• Optimierte Ausgabe von JavaScript- oder CSS-Dateien im Frontend

VORAUSSETZUNGEN

• Alle Voraussetzungen von CONTENIDO 4.8.x gelten auch für mpMinify

INSTALLATION
Beispielhaft wird im Folgenden davon ausgegangen, dass das Mandantenverzeichnis 'cms' lautet.

Dateien aus dem mpMinify-Package in die entsprechenden CONTENIDO-Verzeichnisse kopieren.

• 'vendor' in das CONTENIDO Installationsverzeichnis kopieren
• 'cms' oder den Inhalt davon in das Mandantenverzeichnis kopieren

Die Datei 'cms/min/index.php' öffnen und für den Mandanten anpassen

• Werte in $min_con_config überschreiben Einstellungen von 'vendor/minify/min/config.php'
• Werte in $min_con_config_test überschreiben Einstellungen von 'vendor/minify/min/config-test.php'
• Werte in min_con_groupsConfig überschreiben Einstellungen von 'vendor/minify/min/groupsConfig'

Anpassen der URLs zu JavaScript- oder CSS-Dateien im Layout.

Anwendungsbeispiel:
Im Layout werden folgende Dateien eingebunden

Code: Alles auswählen

<script src="js/awesomelib.js" type="text/javascript"></script>
<script src="js/awesomelib-tooltip.js" type="text/javascript"></script>
<script src="js/awesomelib-gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/navigation.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/forms.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/tooltip.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/gallery.css" type="text/css" media="all" />

Um das mit minify zu optimieren, kann man folgende Schritte machen:

In der Datei 'cms/min/index.php' die Konfiguration für Gruppen setzen.

Code: Alles auswählen

$min_con_groupsConfig = array(
    'js' => array(
        '//cms/js/awesomelib.js',
        '//cms/js/awesomelib-tooltip.js',
        '//cms/js/awesomelib-gallery.js'
    ),
    'css' => array(
        '//cms/css/main.css',
        '//cms/css/navigation.css'
        '//cms/css/forms.css'
        '//cms/css/tooltip.css'
        '//cms/css/gallery.css'
    ),
);

Der Prefix '//cms/' ist für minify und referenziert den Pfad der Datei vom
Documentroot des Webservers aus.

Beispiel:
/var/www/ -> Document Root
/var/www/cms -> Mandantenverzeichnis
/var/www/cms/js/awesomelib.js -> JavaScript Datei im Mandantenverzeichnis
minify Wert -> //cms/js/awesomelib.js

Im Layout die Angaben ändern in

Code: Alles auswählen

<script src="min/?g=js" type="text/javascript"></script>
<link rel="stylesheet" href="min/?g=css" type="text/css" media="all" />

Mit der URL "min/?g=js" werden alle Dateien in der Gruppe "js" zusammengefügt und komprimiert, also die 3 JavaScript-Dateien.

Mit der URL "min/?g=css" werden alle Dateien in der Gruppe "css" zusammengefügt und komprimiert, also die 5 CSS-Dateien.

Der erste Aufruf im Frontend kann etwas länger als üblich dauern, da minify die Dateien verarbeitet und cached. Danach geht es viel schneller.



WICHTIGES ZUM INHALT
cms/min/index.php:
Die minify Konfiguration für das Frontend des Mandanten.

vendor/minify:
Die Sourcen der minify Applikation.
vendor/minify/README.txt -> Sollte man sich immer durchlesen
vendor/minify/MIN.txt -> Enthält weitere Anwendungsbeispiele zu minify



TIPPS
Bei Verwendung einer mod_rewrite Lösung kann es nötig sein, Anfragen auf das 'min' Verzeichnis im Mandantenordner vom Umschreiben ausschließt.


DOWNLOAD
Das Modul könnt ihr vom GitHub Repository herunterladen:
https://github.com/purcaholic/mpMinify

Grüße
xmurrix

[uwe-schmitt]

Hallo xmurrix,

bei mir will das Ganze nicht so richtig…

Ich habe die Sourcen wie beschrieben kopiert, wobei ich hier: 'cms' oder den Inhalt davon in das Mandantenverzeichnis kopieren den Ordner "min" in das Verzeichnis "cms" kopiert habe.
Die Anpassungen an der index.php hab' ich so gemacht:

Code: Alles auswählen

// (array) Overwrite minify group configuration in vendor/minify/min/groupsConfig.php
$min_con_groupsConfig = array(
#    'js' => array(
'//cms/js/jquery-1.7.2.min.js',
'//cms/js/jquery.socialshareprivacy.min.js', 
'//cms/js/nivo-slider/jquery.nivo.slider.pack.js'),
#    'css' => array(
'//cms/css/reset.css', 
'//cms/css/text.css', 
'//cms/css/960.css', 
'//cms/css/daheim.css', 
'//cms/js/nivo-slider/nivo-slider.css', 
'//cms/js/nivo-slider/themes/default/default.css', 
'//cms/js/nivo-slider/mpNivoSlider.css'),
);

Weitere Anpassungen an der index.php hab' ich nicht vorgenommen. Das Layout hab' ich entsprechend Deiner Vorgaben angepasst.
Da ich Dein AMR verwende, hab' ich diese Ausnahme in die .htaccess aufgenommen:

Code: Alles auswählen

RewriteRule ^cms/min/.*$ - [L]

Beim Seitenaufruf erscheinen die Seiten aber ohne CSS und JS…
Woran kann's liegen?

Gruß
Uwe

[xmurrix]

Hallo Uwe,

die Konfiguration muss schon die Gruppen "js" und "css" haben, die sind bei dir Auskommentiert:

Code: Alles auswählen

// (array) Overwrite minify group configuration in vendor/minify/min/groupsConfig.php
$min_con_groupsConfig = array(
    'js' => array(
        '//cms/js/jquery-1.7.2.min.js',
        '//cms/js/jquery.socialshareprivacy.min.js', 
        '//cms/js/nivo-slider/jquery.nivo.slider.pack.js'
    ),
    'css' => array(
        '//cms/css/reset.css', 
        '//cms/css/text.css', 
        '//cms/css/960.css', 
        '//cms/css/daheim.css', 
        '//cms/js/nivo-slider/nivo-slider.css', 
        '//cms/js/nivo-slider/themes/default/default.css', 
        '//cms/js/nivo-slider/mpNivoSlider.css'
    )
);

Dann brauchst du folgende 2 Zeilen in deinem Layout:

Code: Alles auswählen

<script src="min/?g=js" type="text/javascript"></script>
<link rel="stylesheet" href="min/?g=css" type="text/css" media="all" />

Sollte es immer noch nicht gehen, kannst du mal prüfen, was da genau passiert.
Rufe z. B. die "min/?g=js" direkt im Browserfenster auf. Bekommst du die Startseite, dann wirkt die mod_rewrite Ausnahmeregel nicht. Bekommst keine Ausgabe, dann muss man shauen, woran das liegt (z. B. Schreibrechte im Cache-Verzeichnis)...

Gruß
xmurrix

[uwe-schmitt]

Hallo xmurrix,

danke für Deine schnelle Hilfe. Leider hab' ich keinen Erfolg. Welches cache-Verzeichnis meinst Du? Das vom Mandanten oder das von Contenido? Werden da alle Skripte und CSS-Angaben komprimiert abgelegt? Wenn ja, dann passiert das bei mir trotz vorhandener Schreibrechte nicht.
Die .htaccess-Ausnahme funktioniert, die habe ich geprüft… …ansonsten weiß ich mir jetzt keinen Rat mehr.

Gruß
Uwe

[xmurrix]

...Welches cache-Verzeichnis meinst Du? Das vom Mandanten oder das von Contenido? Werden da alle Skripte und CSS-Angaben komprimiert abgelegt? Wenn ja, dann passiert das bei mir trotz vorhandener Schreibrechte nicht....

In der "cms/min/index.php" ist das Cacheverzeichnis des Mandanten konfiguriert, und darin wird auch die CONTENIDO eingebunden.

Wielleicht stimmen ja bei dir die dynamisch ermittelden Pfade in den Variablen $min_con_frontend_path und $min_con_path nicht.

Gruß
xmurrix

[uwe-schmitt]

Hallo xmurrix,

ich bin's nochmal…
Bei mir werden die Pfade zur /min/index.php nicht richtig erstellt. Das sieht bspw. so aus:

Code: Alles auswählen

http://pflege-daheim.net/ueber-uns/min/?g=css

Richtig wäre doch:

Code: Alles auswählen

http://pflege-daheim.net/min/?g=css

, oder.
Meine Regel in der .htaccess sieht nach wie vor so aus:

Code: Alles auswählen

RewriteRule ^cms/min/.*$ - [L]

Wie bereits erwähnt, habe ich Schreibrechte im cache-Verzeichnis. Liegt es bei mir eventuell daran, dass ich Unterkategorien im AMR eingerichtet habe?

Gruß
Uwe

[xmurrix]

Hallo uwe-schmitt,

je nach Projekt und je nach Voraussetzungen, können die Pfade natürlich auch anders sein. Hat du ein Mandantenverzeichnis "cms", ist dieses Verzeichnis selber das Documentroot oder ist es ein Unterordner des Documentroots. Verwendet du Clean-URLs, gibt es den base-Tag mit der Angabe der Adressbasis?

Das alles kann je nach Projekt anders sein und da können die Angaben/Einstellungen von den hier angegebenen Werten variieren.

Soweit ich das sehe, hat die Seite pflege-daheim.net, einen base-Tag, der Mandantenordner ist cms und liegt unterhalb des Document-Root.

Code: Alles auswählen

<base href="http://pflege-daheim.net/cms/" />

Also sollte der Browser URLs wie

Code: Alles auswählen

<script src="min/?g=js" type="text/javascript"></script>
<link rel="stylesheet" href="min/?g=css" type="text/css" media="all" />

richtig interpretieren, also

Code: Alles auswählen

http://pflege-daheim.net/cms/min/?g=js
http://pflege-daheim.net/cms/min/?g=css

Denn das funktioniert ja auch bei allen anderen URLs auf der Seite genauso.

Unterkategorien sollten kein Problem darstellen, sofern du mit dem base-Tag arbeitest.

Ohne base-Tag und mit Clean-URLs musst du dann die URL vom Documentroot aus angeben:

Code: Alles auswählen

<script src="/cms/min/?g=js" type="text/javascript"></script>
<link rel="stylesheet" href="/cms/min/?g=css" type="text/css" media="all" />

Gruß
xmurrix

[uwe-schmitt]

Hallo xmurrix,

danke für Deine Antwort. Genauso wie Du es beschreibst, ist die Site eingestellt und minify auch konfiguriert. Leider will es trotzdem nicht funktionieren. Möglicherweise liegt es am Hoster? Ich werde daher Dein PlugIn an einer anderen Installation testen. Vielleicht bin ich dann schlauer…

Gruß
uwe-schmitt

[apicalart]

Hallo xmurrix,

ist die Version auch schon für 4.9.4 tauglich und einsetzbar?

[xmurrix]

Hallo apicalart,

mpMinify sollte auf anhieb mit der 4.9 er Version von CONTENIDO funktionieren. Es verwendet keine Dateien/Funktionen aus CONTENIDO, man definiert nur die Pfade zu den JS- und CSS-Dateien im Frontend liegen.

Willst du z. B. auch JS- und CSS-Dateien, die im Modulverzeichnis des Mandanten liegen, mit mpMinify Zusammenführen oder Komprimieren, so wird das etwas schwierig, das CONTENIDO die Pfade zu diesen Dateien dynamisch generiert und man hier etwas Zeit in die Entwicklung eines Features implementieren muss, diese generierten Pfade abzufangen und auf mpMinify umzustellen.

Am einfachsten ist es, wenn du die JS- und CSS-Dateien aus dem Modulverzeichnis auslässt, oder du packst alle in das cms/css und cms/js rein, konfigurierst mpMinify so, dass es alle zusammenführt/komprimiert. Dann hast du am Ende eine JS und eine CSS. Bei beiden könnte je nach der Menge des Ausgangscodes die Dateigröße etwas viel sein, dafür wären es 2 Requests, die der Browser abschicken muss. Da muss man dann schauen, dass man die goldene Mitte findet...

Gruß
xmurrix

[rethus]

Ich habs noch nicht installiert oder ausprobiert, aber...

+1 für die Idee, und dass du ein entsprechendes Modul gebaut hast.