Best Way to automatically compress and minimize JavaScript files in an ASP.NET MVC app

Question

So I have an ASP.NET MVC app that references a number of javascript files in various places (in the site master and additional references in several views as well).

I'd like to know if there is an automated way, and if so what is the recommended approach, for compressing and minimizing such references into a single .js file where possible. Such that this ...

<script src="<%= ResolveUrl("~") %>Content/ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.rating/ext.ux.ratingplugin.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext-starslider/ext-starslider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.dollarfield.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.combobox.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/SessionProvider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/TabCloseMenu.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/ActivityForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/UserForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/SwappedGrid.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/Tree.js" type="text/javascript"></script>

... could be reduced to something like this ...

<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>

Thanks

Answer 1

Scott Hanselman recently blogged about combining and moving scripts to static files, basically using the ScriptManager with CompositeScript references and a Path attribute:

<asp:ScriptManager runat="server">
    <CompositeScript path="http://www.example.com/1.js"&gt;
     <Scripts>
      <asp:ScriptReference />
      <asp:ScriptReference />
      <!-- etc. -->
     </Scripts>
    </CompositeScript>
</asp:ScriptManager>

In terms of minifying the static files, you probably have to (and should) use minifying tools at build/deployment time.

Answer 2

I personally think that keeping the files separate during development is invaluable and that during production is when something like this counts. So I modified my deployment script in order to do that above.

I have a section that reads:

<Target Name="BeforeDeploy">

     <ReadLinesFromFile File="%(JsFile.Identity)">
      <Output TaskParameter="Lines" ItemName="JsLines"/>
     </ReadLinesFromFile>

     <WriteLinesToFile File="Scripts\all.js" Lines="@(JsLines)" Overwrite="true"/>

     <Exec Command="java -jar tools\yuicompressor-2.4.2.jar Scripts\all.js -o Scripts\all-min.js"></Exec>

    </Target>

And in my master page file I use:

if (HttpContext.Current.IsDebuggingEnabled)
   {%>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-1.3.2.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-ui-1.7.2.min.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.form.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.metadata.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.validate.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/additional-methods.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/form-interaction.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/morevalidation.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/showdown.js") %>"></script>
<%
   }  else  {%> 
  <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/all-min.js")%>"></script>
<% } %>

The build script takes all the files in the section and combines them all together. Then I use YUI's minifier to get a minified version of the javascript. Because this is served by IIS, I would rather turn on compression in IIS to get gzip compression. ** Added ** My deployment script is an MSBuild script. I also use the excellent MSBuild community tasks (http://msbuildtasks.tigris.org/) to help deploy an application.

I'm not going to post my entire script file here, but here are some relevant lines to should demonstrate most of what it does.

The following section will run the build in asp.net compiler to copy the application over to the destination drive. (In a previous step I just run exec net use commands and map a network share drive).

<Target Name="Precompile" DependsOnTargets="build;remoteconnect;GetTime">

      <MakeDir Directories="%(WebApplication.SharePath)\$(buildDate)" />

      <Message Text="Precompiling Website to %(WebApplication.SharePath)\$(buildDate)" />

      <AspNetCompiler
       VirtualPath="/%(WebApplication.VirtualDirectoryPath)"
       PhysicalPath="%(WebApplication.PhysicalPath)"
       TargetPath="%(WebApplication.SharePath)\$(buildDate)"
       Force="true"
      Updateable="true"
      Debug="$(Debug)"
       />
      <Message Text="copying the correct configuration files over" />

      <Exec Command="xcopy $(ConfigurationPath) %(WebApplication.SharePath)\$(buildDate) /S /E /Y" />

     </Target>

After all of the solution projects are copied over I run this:

    <Target Name="_deploy">
     <Message Text="Removing Old Virtual Directory" />
     <WebDirectoryDelete
      VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
      ServerName="$(IISServer)"
      ContinueOnError="true"
      Username="$(username)" 
      HostHeaderName="$(HostHeader)"
      />

     <Message Text="Creating New Virtual Directory" />

     <WebDirectoryCreate 
      VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)" 
      VirtualDirectoryPhysicalPath="%(WebApplication.IISPath)\$(buildDate)"
      ServerName="$(IISServer)"
      EnableDefaultDoc="true"
      DefaultDoc="%(WebApplication.DefaultDocument)"
      Username="$(username)"
      HostHeaderName="$(HostHeader)"
      />
</Target>

That should be enough to get you started on automating deployment. I put all this stuff in a separate file called Aspnetdeploy.msbuild. I just msbuild /t:Target whenever I need to deploy to an environment.

Answer 3

As others have suggested, you'd be best off creating a static minified build. Alternatively, there's a version of YUICompressor available for .NET here: http://www.codeplex.com/YUICompressor

Answer 4

Actually there is a much easier way using Web Deployment Projects (WDP). The WDP will manage the complexities of the aspnet__compiler and aspnet__merge tool. You can customize the process by a UI inside of Visual Studio.

As for the compressing the js files you can leave all of your js files in place and just compress these files during the build process. So in the WDP you would declare something like this:

<Project>
   REMOVE CONTENT HERE FOR WEB

<Import 
  Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
  <BuildDependsOn>
    $(BuildDependsOn);
    CompressJavascript
  </BuildDependsOn>
</PropertyGroup>

<Target Name="CompressJavascript">
  <ItemGroup>
    <_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
  </ItemGroup>
  <Message Text="Compresing Javascript files" Importance="high" />
  <JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>

This uses the JSCompress MSBuild task from the MSBuild Community Tasks which I think is based off of JSMin.

The idea is, leave all of your js files as they are (i.e. debuggable/human-readable). When you build your WDP it will first copy the js files to the OutputPath and then the CompressJavascript target is called to minimize the js files. This doesn't modify your original source files, just the ones in the output folder of the WDP project. Then you deploy the files in the WDPs output path, which includes the pre-compilied site. I covered this exact scenario in my book (link below my name).

You can also let the WDP handle creating the Virtual Directory as well, just check a checkbox and fill in the name of the virtual directory.

For some links on MSBuild:

• Inside MSBuild
• 7 Steps To MSBuild
• MSDN MSBuild Docs

Answer 5

I have written something to handle this for me automatically. It uses google's closure compiler. You can read the code here:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

Thanks

Guido

Answer 6

You could use MvcContrib.IncludeHandling. It:

• Supports CSS and JS
• Combines to a single request
• Minifies
• Gzip/Deflate compresses
• Sets up cache headers
• Uses HTMLHelper extension methods to register includes to then combine them at run-time
• Is pluggable via IoC

Under the covers, it uses YUICompressor.

Answer 7

MvcContrib.IncludeHandling works well for this situation. In the example, I have a Model with a collection of styles (string). Also if I need to add a custom Style/JS to the page then can do that as well. Then calling Html.RenderCss combines all the styles/js together in one file and minifies it.

<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

Same way for javascript.

<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>

<%=Html.RenderJs()%>

When this gets rendered to the client the output looks like this (minified combined 1 file)

<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>

The API also offers a debug flag which when on doesn't minify or combine the scripts when set which is greatly useful.

In a matter of minutes I went from Yslow score of F to B. (24 scripts down to 2)... Awesome! And a drop of 40kbs.

Obvious downside is the server is doing the compression on the fly. I think there are options to cache the combined script for a defined period which would quickly alleviate this though.