Minify JavaScript und CSS mit AjaxMin


Wie ich bereits in meinem letzten Post erläutert habe gibt es die unterschiedlichsten Möglichkeiten um seine Webseiten zu “verkleinern”. Hier will ich nur kurz zeigen wie schnell man sein JavaScript Code bzw. seinen CSS Code verkleinern kann.

Ich benutzte dafür AjaxMin von Microsoft, welches auf Codeplex zur Verfügung gestellt wird inklusive des Quelltextes. Wir benötigen allerdings nur die “AjaxMin.dll” welche im msi Package enthalten ist und wenn man das installiert, findet man die passende DLL z.B. unter:

C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin.dll

Wenn der Standard Installationspfad gewählt wurde.

Ich habe mir hierfür ein einfaches ASP.NET MVC3 Projekt erstellt. In diesem möchte ich einfach die bereits erstellten CSS und JavaScript Dateien Minimiert direkt auf der Seite mit ausgeben. (Ich bin mir dessen bewusst das es sich dabei nicht um eine optimale Lösung handelt, da diese dann immer mit heruntergeladen werden, besser wäre hier ein Handler in dem man das Caching einstellen kann, ich glaube außerdem gelesen zu haben das dies z.B. bei MVC4 bereits integriert ist. Das ganze lässt sich aber auch simpel in einer Standard ASP.NET Anwendung unterbringen.)

Als erstes muss die AjaxMin.dll als Verweis unserem Projekt hinzugefügt werden und dann können wir schon mal in der _Layout.cshtml Datei einfach die alten Script und Style Einträge mit dem folgenden Code ersetzten:

    @Minify.Min(false).Css("Content\\Site.css")
    @Minify.Min(false).JavaScript("Scripts\\jquery-1.5.1.min.js")
    @Minify.Min(false).JavaScript("Scripts\\modernizr-1.7.min.js")

und der passende Code der Minify Klasse, damit auch die Aufrufe in der _Layout.cshtml Datei funktionieren:

public class Minify
{
    #region Static
    /// <summary>
    /// Neues Minify Objekt zurückgeben, welches dann JavaScript oder Css Minifien kann.
    /// </summary>
    /// <param name="debug">Gibt an ob alles Minified werden soll oder nicht, wenn debuggt werden soll.</param>
    public static Minify Min(bool debug)
    {
        return new Minify(debug);
    }
    #endregion

    #region Konstruktor
    private Minify(bool debug)
    {
    }
    #endregion

    #region Member
    /// <summary>
    /// Gibt an ob die Daten Minified werden sollen oder ob diese zum Debuggen normal ausgegeben werden sollen.
    /// </summary>
    public bool Debug { get; set; }
    #endregion

    #region Public Functions
    /// <summary>
    /// CSS Datei Minimieren
    /// </summary>
    /// <param name="fileName">Relativer Pfad vom Webverzeichnis aus zur Datei die Minimiert werden soll</param>
    /// <returns>Minified Stylesheet in einem Style Tag</returns>
    public MvcHtmlString Css(string fileName)
    {
        //Den Pfad heraussuchen in dem die Style Datei gefunden werden kann.
        string path = Path.Combine(HttpContext.Current.Server.MapPath(@"~/"), fileName);
        if (File.Exists(path))
        {
            //Den Style auslesen aus der Original Datei.
            string style = File.ReadAllText(path);
            if (!Debug)
            {
                //Den AjaxMinifier nutzen um die Daten zu "verkleinern"
                Minifier minifier = new Minifier();
                style = minifier.MinifyStyleSheet(style);
            }

            //Das ganze in Style Tags packen und dann zurückgeben
            return new MvcHtmlString(string.Format("<style>{0}</style>", style));
        }

        return new MvcHtmlString(string.Empty);
    }

    /// <summary>
    /// JavaScript Datei Minimieren.
    /// </summary>
    /// <param name="fileName">Relativer Pfad vom Webverzeichnis aus zur Datei die Minimiert werden soll</param>
    /// <returns>Minified JavaScript in einem Script Tag</returns>
    public MvcHtmlString JavaScript(string fileName)
    {
        //Den Pfad heraussuchen in dem die Style Datei gefunden werden kann.
        string path = Path.Combine(HttpContext.Current.Server.MapPath(@"~/"), fileName);
        if (File.Exists(path))
        {
            //Den Style auslesen aus der Original Datei.
            string script = File.ReadAllText(path);
            if (!Debug)
            {
                //Den AjaxMinifier nutzen um die Daten zu "verkleinern"
                Minifier minifier = new Minifier();
                script = minifier.MinifyJavaScript(script);
            }

            //Das ganze in Style Tags packen und dann zurückgeben
            return new MvcHtmlString(string.Format("<script>{0}</script>", script));
        }

        return new MvcHtmlString(string.Empty);
    }
    #endregion
}

Damit lässt sich der eigene CSS und JavaScript Code sehr schnell Minimieren und bei dieser evtl. auch nicht ganz glücklichen Variante hat man zumindest die Requests auf einen Request für die Seite inklusive JavaScript Dateien und CSS “optimiert”.

Das ganze Projekt könnt Ihr auch unter CodePlex finden.

https://squadwuschel.codeplex.com/

Unter: Source Code –> Browse –> Testprojekte –> MvcMinimizerTest

Leider habe ich das AjaxMin Projekt nicht bei NuGet gefunden, denn damit wäre ein Update einfacher, wenn es da jemand finden sollte, bin ich über einen Kommentar dankbar.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s