Wenn Du über neue Weblog-Einträge Bescheid wissen möchtest, dann abonniere einfach den Atom-Feed oder folge mir bei Twitter.

✗

CSS und JavaScript-Minifier

Heute werde ich wieder einmal eine nützliche PHP-Funktion vorstellen. Genauer gesagt handelt es sich um eine Klasse, die CSS und JavaScript komprimieren kann. Bei diesem Minification (oder minify) genannten Prozess, werden unnötige Kommentare, Leerzeichen, Tabulatoren und Zeilenumbrüche entfernt, wodurch die Datei kleiner wird und so schneller an den Benutzer übertragen werden kann. Zusätzlich kann in der Klasse der „bereinigte“ Quellcode auch noch vor der Übertragung mit gzip oder Deflate komprimiert werden, damit er noch schneller übertragen werden kann.

<?php
/* minifier.class.php */

class minifier {

    public function minify_CSS($str, $zip = FALSE) {
        # Zeilenumbrüche und Tabulatoren entfernen
        $str = str_replace(array("\r", "\n", "\t"), '', $str);

        # Kommentare entfernen
        $str = preg_replace('#/\*(.*)\*/#U', '', $str);

        # Header setzen
        header('Content-Type: text/css; charset=UTF-8');
        header('Cache-Control: public, max-age=1209600');

        if($zip === TRUE)
            $str = $this->zip($str);

        echo $str;
    }


    public function minify_JS($str, $zip = FALSE) {
        # Einzeilige Kommentare entfernen
        $str = preg_replace('#//.*#', '', $str);

        # Zeilenumbrüche und Tabulatoren entfernen
        $str = str_replace(array("\r", "\n", "\t"), '', $str);

        # Mehrzeilige Kommentare entfernen
        $str = preg_replace('#/\*(.*)\*/#U', '', $str);

        # Header setzen
        header('Content-Type: text/javascript; charset=UTF-8');
        header('Cache-Control: public, max-age=1209600');

        if($zip === TRUE)
            $str = $this->zip($str);

        echo $str;
    }
    

    protected function zip($str) {
        if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) === TRUE) {

            # Welche Verfahren werden unterstützt?
            if(stripos($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate') !== FALSE) {

                # Komprimieren mit Deflate-Verfahren
                header('Content-Encoding: deflate');
                $str = gzdeflate($str, 9);
            } elseif(stripos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== FALSE) {

                # Komprimieren mit gzip-Verfahren
                header('Content-Encoding: gzip');
                $str = gzencode($str, 9);
            }
        }

        return $str;
    }
}
?>

Die Klasse kann dann in einer beliebigen Datei so aufgerufen werden:

<?php
require_once('minifier.class.php');

$min = new minifier();

# JavaScript komprimieren
$min->minify_JS('[JavaScript-Quellcode]', TRUE);

# CSS komprimieren
$min->minify_CSS('[CSS-Quellcode]', TRUE);
?>

Im Gegensatz zu vielen anderen Minifiern habe ich versucht die Optimierungen „leichtgewichtig“ zu gestalten, also einen Kompromiss aus Bandbreiteneinsparung und Ressourcenschonung zu finden. Viele andere Minifier nehmen nämlich noch mehr Optimierungen vor (Variablenumbenennung, komplizierte RegEx-Konstrukte), die viel Rechenzeit benötigen und daher nur bedingt für die On-the-fly-Erstellung von komprimiertem Code geeignet sind. Sicherlich lassen sich damit die Dateigrößen teils erheblich weiter reduzieren aber auf Kosten der serverseitigen Performance.

Auf blogeum wird die Klasse in einer erweiterten Form auch eingesetzt, um CSS und JS vor der Übertragung zu verkleinern und die Übertragungszeiten zu vermindern.

Wie immer steht der Code unter einer Creative Commons-Lizenz.

16. Juli 2010, am späten Nachmittag · 2 Kommentare · code, css, javascript, optimierung, performance, php, programmieren, schnipsel

Kommentare

11. August 2010, 10:51 UhrKommentar von Tobias Neumann
Hallo,
interessante Funktion. Ich denke ich werde das Beispiel für JavaScript Code noch weiter ausbauen, so dass man dann auch die einzelnen Variablen und Funktionen ersetzt werden.
Vorgestellt habe ich mir das folgendermaßen:
var foo = "Foo"; function fooBar(ThisIsAnPutVar) { ... }
wird zu
var a = "Foo"; function f_A(b) { ... }
11. August 2010, 15:49 UhrKommentar von Christian
Hallo,
interessante Funktion. Ich denke ich werde das Beispiel für JavaScript Code noch weiter ausbauen, so dass man dann auch die einzelnen Variablen und Funktionen ersetzt werden.
Sehr schön, dass meine Funktion nützliche Anhaltspunkte bietet . Diese Funktionalität habe ich aber absichtlich nicht implementiert, weil sie auf jeden Fall Performance kostet. Ich bin aber sehr gespannt deine Lösung zu sehen. Vielleicht ist sie gar nicht so performancefressend.

Mitreden? Dann jetzt kommentieren!

Was’n das?

blogeum ist das persönliche Weblog von Christian Gürtler – seines Zeichens begeisterter Webworker und Programmierer. Er studiert gegenwärtig Angewandte Informatik an der TU Chemnitz.

Neue Kommentare

Christian: Hallo, interessante Funktion. Ich denke ich werde das Beispiel für JavaScript…

Tobias Neumann: Hallo, interessante Funktion. Ich denke ich werde das Beispiel für JavaScript…

Christian: OK, den Zugriff auf "superglobale" Objekte wie window habe ich nicht bedacht.…

ChrisB: Auf diese Weise haben wir auch JSON geparsed, aber ohne Sicherheitsbedenken.…

Martha: Das wundert mich auch. Rot ist doch eine Warnfarbe. Ich kann mir das auch nur…

CSS und JavaScript-Minifier

Kommentare

Mitreden? Dann jetzt kommentieren!

Was’n das?

Abonnieren

Neue Kommentare

Neue Einträge

Lesenswert

Werbung