Automatisch komprimierte Javascript-Dateien ausliefern

Das Web ist ohne Javascript heute kaum noch denkbar. Viele Webseiten implementieren client-seitige Funktionalität, statt alles bereits vorberechnet vom Server zu ziehen. Dementsprechend groß sind mitunter dann auch die Javascripts, die in den Browser geladen werden müssen.

Bandbreite ist zwar kaum noch ein Problem, aber die Benutzer erwarten doch einen schnellen Seitenaufbau. Ein wichtiger Ansatz ist dabei die Funktionen in mehrere kleine Javascript-Dateien zu kapseln und nur die zu laden, die man wirklich benötigt. Aber auch hier kommen schnell einige tausend Zeilen Javascript-Code zusammen. Um die Dateigröße möglichst klein zu halten, bietet sich eine Komprimierung an, wie man sie von ZIP- oder RAR-Archiven her kennt.

Einen wirklich effektiven Packer für Javascript hat der Engländer Dean Edwards vor einigen Jahren veröffentlicht. Das Ding ist sehr effektiv und wohl auch deshalb unter Web-Entwicklern recht beliebt. So komprimiert unter anderem die Truppe um John Resig die Sourcen von jQuery seit der ersten Version mit diesem Algorithmus.

Unter /packer/ bietet Dean ein Web-Formular, mit dem man Scripte sehr schnell und bequem manuell komprimieren kann. Für eine programmatische Komprimierung findet man auf der Seite Links zu einigen Portierungen des Tools in Sprachen wie PHP, Perl, WSH und .NET.

Letztere, die .NET-Portierung von Packer 2.0 von Jesse Hansen, läßt sich wunderbar dazu nutzen, um die eigenen Javascript-Dateien automatisch vor der Auslieferung an den Browser zu komprimieren, denn gerade bei exzessivem Gebrauch der Script-Sprache ist es recht lästig, vor jedem neuen Upload der Sourcen auf den Web-Server schnell noch mal alle Scripte von Hand zu komprimieren. Man schreibt seine Scripte mit soviel Kommentaren und White-Spaces wie man mag. Ausgeliefert wird automatisch der optimierte Code.

Die beiden zuständigen Klassen ECMAScriptPacker.cs und ParseMaster.cs lassen sich entweder direkt in das eigene C#-Projekt übernehmen oder man kann sie schnell in einer entsprechenden Library kompilieren (Download).

Der Abruf der Script-Dateien erfolgt über einen eigenen Handler namens JacascriptFileHandler:

Imports Microsoft.VisualBasic
Imports System.IO
Imports System.Configuration.ConfigurationManager
Imports Dean.Edwards 'Namespace der Packer-Klasse

Public Class JavascriptFileHandler
    Implements IHttpHandler

    Public Sub ProcessRequest( _
        ByVal context As System.Web.HttpContext) _
        Implements System.Web.IHttpHandler.ProcessRequest

        Dim strFileName As String = ""
        Dim strFile As String = ""
        Dim strContent As String = ""

        'Request auslesen
        If Not context.Request.QueryString("f") Is Nothing Then
            strFileName = context.Request.QueryString("f")
        End If

        Try
            'Datei festlegen und prüfen
            strFile = context.Server.MapPath("~/js/" & strFileName & ".js")
            If File.Exists(strFile) = True Then

                'Javascript-Datei auslesen
                Dim sr As StreamReader = File.OpenText(strFile)
                strContent = sr.ReadToEnd
                sr.Close()
                sr.Dispose()

                'Soll die Script-Datei komprimiert werden?
                If CType(AppSettings("DeliverPackedJavascript"), Boolean) = True Then
                    'Javascript packen
                    Dim pk As New ECMAScriptPacker( _
                        ECMAScriptPacker.PackerEncoding.Normal, _
                        True, True)
                    strContent = pk.Pack(strContent)
                End If

            End If
        Catch ex As Exception
        End Try

        'Ausgabe
        context.Response.ContentType = "text/javascript"
        context.Response.Write(strContent)
        context.Response.Flush()
        context.Response.End()

    End Sub

    Public ReadOnly Property IsReusable() As Boolean _
        Implements System.Web.IHttpHandler.IsReusable
        Get
            Return True
        End Get
    End Property

End Class

Mit dem Parameter f wird der Name der Javascript-Datei ohne Dateiendung übergeben, die aus dem Stammordner js ausgeliefert werden soll. Über die in der web.config angelegte AppSetting namens DeliverPackedJavascript wird gesteuert, ob in der aktuellen Konfiguration komprimiert werden soll oder nicht. Damit kann man in seiner Entwicklungsumgebung weiter fleißig debuggen und auf dem produktiven Server wird optimierter Code ausgeliefert.

Den Handler muss man nun noch in der web.config dem System bekannt machen...

    <add verb="GET" path="js.axd" type="JavascriptFileHandler"/>

...und die Verweise in den ASPX-Seiten müssen gerändert werden...

    <script src="~/js.axd?meinescripte" type="text/javascript" runat="server"></script>

...um zum Beispiel die Datei meinescripte.js gepackt zum Browser zu schicken.

Happy Coding :)