Verketten und reduzieren Sie JavaScript während der Installation ODER zur Laufzeit - ASP.NET MVC

Versuchen Sie dies:

Ich habe vor kurzem ein gutes Stück von Forschung und konsequente Entwicklung auf der Arbeit, geht ganz schön weit zu verbessern, die Leistung unserer web-Anwendung front-end. Ich dachte, ich würde teilen die einfache Lösung hier.

Die erste offensichtliche Sache zu tun ist, vergleichen Sie Ihre Website mit Yahoo YSlow und Google PageSpeed. Diese zeigen die "low-hanging fruit" performance-Verbesserungen zu machen. Es sei denn, Sie das bereits getan haben, die daraus resultierenden Vorschläge werden sicherlich kombinieren, minifying und Gzip Ihrer statischen Inhalte.

Die Schritte, die wir durchführen, sind:

Schreiben Sie eine benutzerdefinierte HTTPHandler zu kombinieren und minifizieren von CSS.
Schreiben Sie einen benutzerdefinierten HTTPHandler zu kombinieren und minifizieren JS.
Einen Mechanismus beinhalten, um sicherzustellen, dass die oben tun nur Ihre Magie, wenn die Anwendung nicht im debug-Modus.
Schreiben Sie eine benutzerdefinierte server-Seite web-Steuerung für die einfache Pflege von css - /js-Datei Einbindung.
Aktivieren Sie die GZIP-von bestimmten Inhaltstypen, die auf IIS 6.
Richtige, beginnen wir mit CSSHandler.asax implementiert .NET IHttpHandler-Schnittstelle:

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;

namespace WebApplication1
{
    public class CssHandler : IHttpHandler
    {
        public bool IsReusable { get { return true; } }

        public void ProcessRequest(HttpContext context)
        {
            string[] cssFiles = context.Request.QueryString["cssfiles"].Split(',');

            List<string> files = new List<string>();
            StringBuilder response = new StringBuilder();
            foreach (string cssFile in cssFiles)
            {
                if (!cssFile.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
                {
                    //log custom exception
                    context.Response.StatusCode = 403;
                    return;
                }

                try
                {
                    string filePath = context.Server.MapPath(cssFile);
                    string css = File.ReadAllText(filePath);
                    string compressedCss = Yahoo.Yui.Compressor.CssCompressor.Compress(css);
                    response.Append(compressedCss);
                }
                catch (Exception ex)
                {
                    //log exception
                    context.Response.StatusCode = 500;
                    return;
                }
            }

            context.Response.Write(response.ToString());

            string version = "1.0"; //your dynamic version number 

            context.Response.ContentType = "text/css";
            context.Response.AddFileDependencies(files.ToArray());
            HttpCachePolicy cache = context.Response.Cache;
            cache.SetCacheability(HttpCacheability.Public);
            cache.VaryByParams["cssfiles"] = true;
            cache.SetETag(version);
            cache.SetLastModifiedFromFileDependencies();
            cache.SetMaxAge(TimeSpan.FromDays(14));
            cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        }
    }
}

Ok, nun einige Erläuterungen:

IsReUsable-Eigenschaft hinzu:

Sind wir nicht mit etwas befasse, Instanz-spezifisch, was bedeutet, können wir sicher die Wiederverwendung der gleichen Instanz des handlers, der sich mit mehreren Anfragen, weil unsere ProcessRequest threadsicher ist. Mehr info.

ProcessRequest-Methode:

Nichts zu hektisch hier Los ist. Wir sind die Schleife durch CSS-Dateien gegeben, die uns (siehe CSSControl unten, wie Sie kommen) und dann wird jeder, mit einem .NETZ-Hafen von Yahoo YUICompressor, bevor Sie den Inhalt hinzufügen, um die ausgehende Antwort stream.

Den Rest der Methode beschäftigt sich mit dem einrichten einige HTTP-caching-Eigenschaften weiter zu optimieren die Art und Weise der browser-client-downloads (oder auch nicht, wie der Fall sein kann) Inhalte.

Setzen wir Etags im code, so dass Sie können die gleichen für alle Computer in unsere server-farm.
Wir setzen Antwort und Cache-Abhängigkeiten auf unsere eigentlichen Dateien so ist, sollte Sie ersetzt werden, cache ungültig erklärt werden.
Wir setzen Cachefähigkeit, so dass proxies, Zwischenspeichern können.
Wir VaryByParams-mit unserem cssfiles-Attribut, so dass wir-cache pro CSS-Gruppe Datei übermittelt durch die handler.
Und hier ist die CSSControl, eine benutzerdefinierte server-Seite Steuern, erbt das .NET LiteralControl.

Front:

<customcontrols:csscontrol id="cssControl" runat="server">
  <CustomControls:Stylesheet File="main.css" />
  <CustomControls:Stylesheet File="layout.css" />
  <CustomControls:Stylesheet File="formatting.css" />
</customcontrols:csscontrol>

Zurück:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;
using TTC.iTropics.Utilities;

namespace WebApplication1
{
    [DefaultProperty("Stylesheets")]
    [ParseChildren(true, "Stylesheets")]
    public class CssControl : LiteralControl
    {
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public List<Stylesheet> Stylesheets { get; set; }

        public CssControl()
        {
            Stylesheets = new List<Stylesheet>();
        }

        protected override void Render(HtmlTextWriter output)
        {
            if (HttpContext.Current.IsDebuggingEnabled)
            {
                const string format = "<link rel=\"Stylesheet\" href=\"stylesheets/{0}\"></link>";

                foreach (Stylesheet sheet in Stylesheets)
                    output.Write(format, sheet.File);
            }
            else
            {
                const string format = "<link type=\"text/css\" rel=\"Stylesheet\" href=\"stylesheets/CssHandler.ashx?cssfiles={0}&version={1}\"/>";
                IEnumerable<string> stylesheetsArray = Stylesheets.Select(s => s.File);
                string stylesheets = String.Join(",", stylesheetsArray.ToArray());
                string version = "1.00" //your version number

                output.Write(format, stylesheets, version);
            }

        }
    }

    public class Stylesheet
    {
        public string File { get; set; }
    }
}

HttpContext.Aktuelle.IsDebuggingEnabled angeschlossen ist, um die folgende Einstellung in Ihrem web.config:

<system.web>
  <compilation debug="false">
</system.web>

Also, im Grunde, wenn Ihre Website ist im debug-Modus erhalten Sie HTML-markup wie dieses:

<link rel="Stylesheet" href="stylesheets/formatting.css"></link>
<link rel="Stylesheet" href="stylesheets/layout.css"></link
<link rel="Stylesheet" href="stylesheets/main.css"></link>

Aber wenn Sie im Produktions-Modus (debug=false), erhalten Sie markup wie dieses:

<link type="text/css" rel="Stylesheet" href="CssHandler.ashx?cssfiles=main.css,layout.css,formatting.css&version=1.0"/>

Letzteres wird dann offensichtlich, rufen die CSSHandler, die Pflege der Verbindung, minifying und cache-bereitet Ihre statischen CSS-Dateien.

Alle der oben genannten können dann auch dupliziert werden für die statische JavaScript-Inhalte:

`JSHandler.ashx:

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;

namespace WebApplication1
{
    public class JSHandler : IHttpHandler
    {
        public bool IsReusable { get { return true; } }

        public void ProcessRequest(HttpContext context)
        {
            string[] jsFiles = context.Request.QueryString["jsfiles"].Split(',');

            List<string> files = new List<string>();
            StringBuilder response = new StringBuilder();

            foreach (string jsFile in jsFiles)
            {
                if (!jsFile.EndsWith(".js", StringComparison.OrdinalIgnoreCase))
                {
                    //log custom exception
                    context.Response.StatusCode = 403;
                    return;
                }

                try
                {
                    string filePath = context.Server.MapPath(jsFile);
                    files.Add(filePath);
                    string js = File.ReadAllText(filePath);
                    string compressedJS = Yahoo.Yui.Compressor.JavaScriptCompressor.Compress(js);
                    response.Append(compressedJS);
                }
                catch (Exception ex)
                {
                    //log exception
                    context.Response.StatusCode = 500;
                    return;
                }
            }

            context.Response.Write(response.ToString());

            string version = "1.0"; //your dynamic version number here

            context.Response.ContentType = "application/javascript";
            context.Response.AddFileDependencies(files.ToArray());
            HttpCachePolicy cache = context.Response.Cache;
            cache.SetCacheability(HttpCacheability.Public);
            cache.VaryByParams["jsfiles"] = true;
            cache.VaryByParams["version"] = true;
            cache.SetETag(version);
            cache.SetLastModifiedFromFileDependencies();
            cache.SetMaxAge(TimeSpan.FromDays(14));
            cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        }
    }
}

Und seiner begleitenden JSControl:

Front:

<customcontrols:JSControl ID="jsControl" runat="server">
  <customcontrols:Script File="jquery/jquery-1.3.2.js" />
  <customcontrols:Script File="main.js" />
  <customcontrols:Script File="creditcardpayments.js" />
</customcontrols:JSControl>

Zurück:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;

namespace WebApplication1
{
    [DefaultProperty("Scripts")]
    [ParseChildren(true, "Scripts")]
    public class JSControl : LiteralControl
    {
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public List<Script> Scripts { get; set; }

        public JSControl()
        {
            Scripts = new List<Script>();
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (HttpContext.Current.IsDebuggingEnabled)
            {
                const string format = "<script src=\"scripts\\{0}\"></script>";

                foreach (Script script in Scripts)
                    writer.Write(format, script.File);
            }
            else
            {
                IEnumerable<string> scriptsArray = Scripts.Select(s => s.File);
                string scripts = String.Join(",", scriptsArray.ToArray());
                string version = "1.0" //your dynamic version number
                const string format = "<script src=\"scripts/JsHandler.ashx?jsfiles={0}&version={1}\"></script>";

                writer.Write(format, scripts, version);
            }
        }
    }

    public class Script
    {
        public string File { get; set; }
    }
}

Aktivieren von GZIP:

Als Jeff Atwood sagt, die Aktivierung der Gzip-auf Ihrer Website-server ist ein no-brainer. Nach einigen tracing, habe ich beschlossen, aktivieren Sie Gzip auf folgende Datei-Typen:

.css
.js
.axd (Microsoft Javascript-Dateien)
.aspx (Übliche ASP.NET Web-Formulare Inhalt)
.ashx (Unsere Handler)
Zum aktivieren der HTTP-Komprimierung auf dem IIS 6.0 web server:

Öffnen Sie den IIS -, Rechts-klicken Sie auf Web-Seiten, Registerkarte Dienste, aktivieren Sie Komprimieren Dateien der Anwendung und Komprimieren von Statischen Dateien
Beenden von IIS
Öffnen Sie IIS-Metabasis in Notepad (C:\WINDOWS\system32\inetsrv\MetaBase.xml) – und ein back-up, wenn Sie nervös sind, über diese Dinge
Suchen und überschreiben die beiden IIsCompressionScheme und eine IIsCompressionSchemes-Elemente mit dem folgenden:

Und das ist es! Das ersparte uns haufenweise Bandbreite und resultierte in einer mehr responsive web-Anwendung im gesamten.

Genießen!

InformationsquelleAutor der Antwort Mark Gibaud

Entweder YUI Compressor oder Dojo Kompressor. Sie verwenden beide die Rhino-JS parsing-engine, die tokenizes Ihren code, und wird daher nur funktionieren, wenn der code gültig ist der code. Wenn es ist ein Fehler, Sie ' ll lassen Sie wissen, (das ist ein netter bonus IMO!) Packer auf der anderen Seite, pack deinen code, selbst wenn es Fehler enthält.

Benutze ich YUI in allen meinen Projekten über build-Skripte. Nie tun Sie es auf der fliege, es dauert zu lange, um zu tun, ist die Kompression. Sowohl YUI und Dojo sind Java-basiert (ala Rhino) und wenn man es auf die Fliegen, werden Sie laichen hintergrund-Prozesse, um die Ausgabe zu generieren - nicht gut für die Leistung. Immer tun Sie es mit dem build.

InformationsquelleAutor der Antwort Bryan Migliorisi

Hier ist, was ich verwendet habe, für die Verkettung, Kompression und caching für CSS-und JS-Dateien:
http://gist.github.com/130913

Es erfordert nur Yahoo.Yui.Compressor.dll in das bin-Verzeichnis. Es spielt keine Kompresse zur compile-Zeit, aber die Dateien sind Cache-Datei mit den Abhängigkeiten, so sind Sie nur einmal geladen, wenn Sie geändert.

Dann ich fügen Sie einfach diesen code in den <head>:

<link rel="stylesheet" type="text/css" href="/YuiCompressor.ashx?css=reset,style,etc" />

- und dies gerade vor dem </body>:

<script type="text/javascript" src="/YuiCompressor.ashx?js=main,other,etc"></script>

Es wurde entwickelt, um die Arbeit mit mehreren Dateien, die alle in den gleichen Pfad, aber könnte leicht aktualisiert werden, um Unterstützung für verschiedene Pfade.

InformationsquelleAutor der Antwort travis

Ich würde empfehlen, http://www.RequestReduce.com minimiert und kombiniert die css-und javascript-sowie css-sprites hintergrund-Bilder und optimiert die PNG-Komprimierung. Dies alles geschieht zur Laufzeit und speichert die Ausgabe. Es erfordert keine code oder Konfiguration über das hinzufügen der HttpModule. Es dient alle zwischengespeicherten Inhalte mit optimierten Fernen Zukunft headers und ETags, um sicherzustellen, dass der Browser-cache der css - /javascript - /sprites so lange wie möglich. Während es erfordert keine Konfiguration, es ist in hohem Maße konfigurierbar und kann so eingerichtet werden, laufen mit einem CDN und sync-Cache-Dateien auf einer web-farm.

Alle javascript, Bilder und css abgerufen werden über HTTP, so dass auch css und js von Dritten und es ist auch ein großartiger Weg, um zu verkleinern/zu kombinieren .axd Ressourcen wie WebResource.axd und ScriptResource.axd. Es bestimmt die Mitwirkung von js und css über content-type, so dass das Ziel-Ressource kann eine beliebige (oder keine) Erweiterung. Es läuft auf jedem IIS-basierte Technologie, einschließlich aller Versionen und Sicht-Motoren von MVC, web forms und "web-Seiten".

Können Sie herunterladen von http://www.RequestReduce.com, Nuget oder Gabel aus https://github.com/mwrock/RequestReduce.

InformationsquelleAutor der Antwort Matt Wrock