Anropa Microsoft Ajax Minifier från ASP.NET MVC
Scott Guthrie gick tidigare idag ut med att Microsoft Ajax Library Preview 6 har släppts. I samband med det så släpptes även Microsoft Ajax Minifier, vilket jag kommer att ta upp nu.
Med Microsoft Ajax Minifier så kan man krympa storleken på sin JavaScript-kod otroligt mycket. Det gör att koden kan laddas in snabbare på sidan och därmed ge en bättre användarupplevelse.
För att komprimera sina js-filer så finns det tre olika sätt, antingen använder man ajaxmin.exe som är ett program som kan anropas genom kommandoprompten, eller så använder man ajaxmintask.dll som kan användas med MSBuild för att komprimera dem vid kompilering, eller ajaxmin.dll som innehåller API:er som kan anropas från vanlig .NET-kod.
Både Microsoft Ajax Library Preview 6 och Microsoft Ajax Minifier går att ladda ned här:
http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488
Tyvärr så saknas både ajaxmintask.dll och ajaxmin.dll i nedladdningen ovan i skrivande stund, men det hindrar oss inte från att köra den ändå. :-)
För att kunna anropa från en ASP.NET MVC-applikation så behöver vi först skapa upp en sådan. Vi skapar sedan en CompressControler och en vy för visning av dels formuläret och dels JavaScriptet som är komprimerat.
Sedan gör vi ett litet fulhack då dll:en inte finns, vi skapar en referens till ajaxmin.exe istället då den innehåller alla API:er som vi behöver.
Jag har även skapat en enkel model som kommer att användas i exemplet.
namespace JsCompress.Models
{
public class JavaScript
{
public string OriginalJavaScript { get; set; }
public string CompressedJavaScript { get; set; }
}
}
Den innehåller originalversionen av JavaScriptet och den komprimerade versionen. Jag kommer inte att göra något med dessa förutom att skriva ut den komprimerade, men det skulle t.ex. kunna cachas för att snabbt kunna komprimeras på servern och laddas in på sidan.
Den fullständiga controllern ser ut så här:
using System.Web.Mvc;
using JsCompress.Models;
using Microsoft.Ajax.Utilities;
namespace JsCompress.Controllers
{
public class CompressController : Controller
{
public ActionResult Index()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public ContentResult Index(FormCollection collection)
{
JavaScript js = new JavaScript();
UpdateModel(js);
JSParser parser = new JSParser(js.OriginalJavaScript, null);
Block block = parser.Parse(new CodeSettings());
js.CompressedJavaScript = block.ToCode();
return Content(js.CompressedJavaScript, "text/plain");
}
}
}
Det jag gör vid postning är att skapa en ny instans av JSParser, vilket kommer från exe-filen. Där skickar jag med originalversionen av JavaScriptet, vilket kommer med i postningen. Sedan parseas JavaScriptet och sparas i CompressedJavaScript.
Det sista som sker är att det skrivs ut på sidan som text/plain genom en ContentResult.
Det finns många inställningar för hur parsningen skall ske, så jag rekommenderar att ni läser igenom dokumentationen vilken följer med i nedladdningen.
Index-vyn i CompressController har bara ett enkelt fält:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<JsCompress.Models.JavaScript>" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Komprimera JavaScript</h2>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Komprimera ett JavaScript</legend>
<p>
<label for="OriginalJavaScript">JavaScript:</label>
<%= Html.TextArea("OriginalJavaScript", new { cols = "120", rows = "20" })%>
</p>
<p>
<input type="submit" value="Compress" />
</p>
</fieldset>
<% } %>
</asp:Content>
För att testa hur det fungerar så kommer jag att använda ett JavaScript som ser ut så här:
//En funktion som räknar ut x + y
function Sum(x, y) {
return x + y;
}
alert(Sum(1, 2));
Om vi testar att stoppa in den i textrutan och väljer att komprimera så får vi nu upp det här:
function Sum(x,y){return x+y}alert(Sum(1,2))
Alla onödiga mellanslag och kommentarer har plockats bort, vilket gör att scriptet nu tar mindre plats.
Det kan antingen användas innan produktionssättning och sedan laddas upp, eller så kan ni modifiera det så att den genererar en kompilerad version direkt på servern varje gång filen uppdateras.
Projektet med exemplen finns att ladda ned här: