Komprimierung von JavaScript und CSS in Umbraco

Dieser Artikel wurde von Do, Hoang Viet am Samstag, 16. November 2013 verfasst. Aktualisiert: 29.01.2014 23:05:02

Über das ClientDependency Framework bietet Umbraco von Haus aus die Möglichkeit CSS und JavaScript-Dateien zu komprimieren und gebündelt an den Client zu schicken.

Die Vorteile liegen auf der Hand.

  1. Die Übertragung wird beschleunigt durch die geringere Dateigrößer und weniger Requests
  2. es kostet weniger Traffic für Server und den Nutzer,
  3. das Parsen wird ebenfalls beschleunigt.

Das Framework ist von Haus aus in Umbraco enthalten und musst nur aktiviert werden. Link zum Framework: externe Link

Setup

Um die Komprimierung zu aktivieren müssen wir in der Web.config den Debugmodus deaktivieren

 <compilation defaultLanguage="c#" debug="false" batch="false" targetFramework="4.0">

Als nächtest müssen unser Template anpassen. Im Endergebnis sieht das Ganze auszugsweise so aus:


@using ClientDependency.Core.Mvc
@inherits UmbracoTemplatePage

@{
    Html.RequiresCss("/css/dph-base.css");
    Html.RequiresJs("/scripts/jquery-ui-1.10.3.custom/js/jquery-1.9.1.min.js", 1);
    Html.RequiresJs("/scripts/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js", 2);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- ... -->
        @Html.RenderCssHere()
        @Html.RenderJsHere()
        <!-- ... -->
    </head>

    <body><!-- ... --></body>
</html>

3 Änderungen sollte der vorherige Auszug aufzeigen. Als erstes fügen den neuen Namespace hinzu, damit wir die Erweiterung durch das Framework bequem aufruf en könen

@using ClientDependency.Core.Mvc

Anschließend werden alle Skripte und CSS, die von ClientDependency verwaltet werden soll, über das Razor Snippet hinzugefügt:


@{
    Html.RequiresCss("/css/dph-base.css");
    Html.RequiresJs("/scripts/jquery-ui-1.10.3.custom/js/jquery-1.9.1.min.js", 1);
    Html.RequiresJs("/scripts/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js", 2);
}

Anmerkung: Diese Anweisungen dürfen nicht embedded im <html> Bereich auftauchen, da es sonst zu merkwürdigen Output führt.

Anmerkung 2: Es gibt auch die Möglichkeit weiterhin die normalen HTML-Tags über rogueFileCompression zunutzen. Dieser Option hat bei uns aber nur auf den lokalen Testserver funktioniert. Auf den Produktionsserver (auf Azure) hat das ClientDependency Framework einfach nix gemacht.

Als letzten Schritt fügen wir irgendwo im <head> Bereich die beiden nachfolgenden Anweisungen hinzu:


        @Html.RenderCssHere()
        @Html.RenderJsHere()

An diese Stelle verlinkt das Framework die komprimierten und gebündelten CSS und JavaScript Dateien ein.

Nun löschen wir den App_Data/TEMP/ClientDependency-Ordner und erhöhen der ClientDependency version in der ClientDependency.config

Fertig!

Hinweise

Für das Debuggen, Verändern und Beheben der Fehler einfach den Debug Modus wieder deaktivieren und Umbraco komprimiert die Dateien nicht bis der Modus wieder abgeschaltet wird.

rogueFileCompression

Um über die normalen HTML-Tags anstelle der Razor-Snippets wie gewohnt die CSS und JavaScript Dateien hinzuzufügen, können wir die rogueFileCompression aktivieren. Wie oben angesprochen hat es nur auf unseren lokalen Testserver funktioniert. Auf Azure hat das ClientDependency Framework einfach gar nix getan.

Hierzu öffnen wir die Konfigurationsdatei von ClientDependency. Dieser befindet sich normalerweise in

/config/ClientDependency.config

Nun suchen nach den nachfolgenden Abschnitt:

    <rogueFileCompression>
      <!--<add path="*" compressJs="true" compressCss="true" jsExt=".js,asmx/js" cssExt=".css">
        <exclusions>
          <add path="^.*test.aspx.*"/>
        </exclusions>
      </add>-->
    </rogueFileCompression>

Dieser befindet sich überlicherweise in der Zeile 74 - 80. Diesen verändern wir wie folgt:

<rogueFileCompression>
      <add path="*" compressJs="true" compressCss="true" jsExt=".js,asmx/js" cssExt=".css">
        <!--
        <exclusions>
          <add path="^.*test.aspx.*"/>
        </exclusions>
        -->
      </add>
    </rogueFileCompression>

Anmerkung: Die Entwickler empfehlen auf ihrem Wiki jedoch nicht diesen Weg zu gehen und stattdessen über die Razor Snippets die JS und CSS Dateien einzubinden, weil die Dateien auf dieser Weise nicht gebündelt werden.

 

 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network