This project is read-only.

Minifier (CSS/JavaScript Minification Handlers)

Introduction:

Although content compression goes a long way to reducing the bandwidth required to download a CSS or JavaScript file from the Web Server, further improvement can be achieved by using a content minifier. Xpedite may support any minifer by implementing the Xpedite.Minification.IResourceMinifier interface. Xpedite has "out-of-the-box" support for both the Microsoft Ajax Minifier (see: http://aspnet.codeplex.com/releases/view/40584) as well as Yui Compressor .NET (see: http://yuicompressor.codeplex.com). See below for a minification comparison.

Key Differences:

My primary goal while writing Xpedite is to create an optimized, 100% configuration based, run-time library for improving web client performance. Xpedite requires no special coding practices to start seeing results. No XML files to configure minification for resource sets, No Response.Writes <%= %> that limit usage to ASPX pages, no build tasks to be configured and maintained. Simply drop in the DLL(s), modify the web.config file and you are done!

Xpedite will cache all minified resources in memory upon first request to ensure that performance is not impacted. Although all resources are held in memory, once minified the resource consumption for even the largest of web applications is negligible.

Note: Run time minification means that the first hit to a web page incurs an extra cost of minifiying the CSS and JavaScript for that page. Any given CSS or JavaScript file is minimized only once, as such the first hit to the first page on a web site after the Application has started will be the most costly. I do plan on implementing a "PreCache" module to ensure that this cost can be mitigated going forward.

Configuration

To start using Xpedite for content minification in your web application, simply add a project reference to Xpedite assembly and add one of the following xml fragments to the web.config file.

IIS6
  <system.web>
    <httpHandlers>
      <add 
        verb="GET,HEAD" path="*.css" 
        type="Xpedite.Minification.CssHandler, Xpedite, PublicKeyToken=f6736b2cf1ee5ed4"/>
      <add 
        verb="GET,HEAD" path="*.js" 
        type="Xpedite.Minification.JavaScriptHandler, Xpedite, PublicKeyToken=f6736b2cf1ee5ed4"/>
    </httpHandlers>
  </system.web>

IIS7
  <system.webServer>
    <handlers>
      <add 
        name="CssMinifier" verb="GET,HEAD" 
        path="*.css" 
        type="Xpedite.Minification.CssHandler, Xpedite, PublicKeyToken=f6736b2cf1ee5ed4"/>
      <add 
        name="JavaScriptMinifier" verb="GET,HEAD" 
        path="*.js" 
        type="Xpedite.Minification.JavaScriptHandler, Xpedite, PublicKeyToken=f6736b2cf1ee5ed4"/>
    </handlers>
  </system.webServer>


Seperate handlers were implemented for CSS and JavaScript to ensure that if you desired the use of custom extensions for your content, you could easily distinguish beetwen content-types. The above configuration simply enables the content handlers within your web application. To enable minification you must configure a minifier for use in your application. To configure minification, a custom configuration section must be added:

Define Custom Configuration Section
  <configuration>
    <configSections>
      <section 
        name="xpedite" type="Xpedite.Config.ConfigSectionHandler, Xpedite, PublicKeyToken=f6736b2cf1ee5ed4" 
        requirePermission="false"/>
    </configSections>
  </configuration>


Once the custom configuration section has been added, the Xpedite configuration may then be specified:

  <configuration>
    <xpedite>
      <minification>
        <css 
          minifier="{See configuration Instructions Below}" 
          mode="On" />
        <javascript 
          minifier="{See configuration Instructions Below}" 
          mode="On" />
      </minification>
    </xpedite>
  </configuration>


Minifier

Microsoft Ajax Minifier Configuration
YuiCompressor .NET Configuration

Mode

Both the CSS and JavaScript minifier support a mode attribute.
  • RemoteOnly - (Default) Will minify all CSS/JavaScript content not accessed from the local machine (i.e., Development environment/Web Server).
  • On - Will always minify all content regardless of request source (To be used if you want to test against minified scripts during development)
  • Off - Will never minify any content regardless of request source. (To be used if minification is to be temporarily disabled)

Exclusions

Key files may be excluded from minification if desired. In order to exclude files from minification, an <excludes> element should be added to the <javascript> or <css> configuration sections.

  <configuration>
    <xpedite>
      <minification>
        <css>
          <excludes>
            <add absolutePathPattern="MyExcludedResource.css" />
          </excludes>
        </css>
        <javascript>
          <excludes>
            <add absolutePathPattern="MyExcludedResource.js" />
          </excludes>
        </jaascript>
      </minification>
    </xpedite>
    <!--Other Configuration-->
  </configuration>


Note: Xpedite does not consider the querystring portion of a URL when evaluating exclusions. To conditionally minify a file based on a querystring parameter does not seem logical. If someone has a valid need for such a feature, I will consider adding support; until then only the absolute path is tested.

Sample Minification Results

Un-Minified
Uncompressed.png

Microsoft Ajax Minifier (see: http://aspnet.codeplex.com/releases/view/40584)
MsAjaxMinifier.png

Yui Compressor .NET (see: http://yuicompressor.codeplex.com)
YuiCompressor.png

Minification with Compression (using Microsoft Ajax Minifier)
MinifiedAndCompressed.png

Future Enhancements

Currently planned future enhancements include:
  • A "PreCache" HttpModule to scan the website for all CSS and JavaScript resources so that they may be minified immediately. When an application is first started, the very first request will prime all resources for the web site if desired (obviously you can choose whether or not you will want this behavior).

If you have any additional suggested, I would be happy to hear them!

Last edited Aug 3, 2010 at 9:01 PM by CBaxter, version 48

Comments

No comments yet.