Web Optimization

Microsoft.NET Web Optimization has a bundle of features which allows it to be the most easy to customize optimization framework available yet. When I say web optimization, I’m talking about bundling, compressing and caching the assets like JavaScript(s), style sheets(less/css). The basic implementation of optimization allows you to add a specific asset to bundle through code, every time asset list or the bundling order changes you have to modify the code to update the bundles on your page. To content manage bundling, we will take an XML based approach to this problem.

Primarily, there are 3 steps involved in web optimization,

  • Add Assets to Bundle
  • Process (compress/compile/order) assets using Parsers (Less compiler, JssMinifier, CssMinifer etc..)
  • Use Html helpers to print the cached asset path on the page

We will start by creating a Standard MVC Project. If you are using visual studio 2012, All the infrastructure required to start bundling is added by default in MVC project template. For other, using VS 2010 or earlier, you will need to Install .net framework 4.5. Most important aspect is that, System.Web.Optimization.dll is the assembly that is required to enable optimization for your project. Make sure that your are not using beta version of this assembly. Here, in this example we will taking a project template created out of VS 2010 and a machine having .Net framework 4.5 installed.

Download Source Code here

Activation of Optimization Framework

We will create an Http Module that will be invoked on PostMapRequestHandler. We are creating a module in this event because, optimization module requires Session and Current HttpContext to be populated, this is the application event that can have both. On Post Map Request State, we will initiate optimization framework by creating an Instance of our custom implementation, rather than calling the system libraries directly.

Custom Wrapper for Optimization

Our custom wrapper is the one which will actually enable us to use custom XML configuration to content manage the optimization framework. Features that we will try to enable are

  • Assets to add in JavaScript bundle – Folder based / File based.
  • Assets to add in Css/Less bundle – Folder based / FIle based.
  • Asset output path – Friendly links for assets.
  • Enable / disable optimization framework completely.

System.Web.Optimization: Supports custom pipelines

Custom compilers and processors, there are two Interfaces that can be extended for using custom processing.

IBundleTransform

Implement this interface to enable custom transformation for bundles. Let us say you want to compile a specific type of asset file not directly supported by optimization framework, you can use this interface to write your own custom transformer or plugin a third-party compiler that can compile the given asset. Let us consider that we want to compile Less files to generate css styles, to have Optimization do this we can use a third-party less compiler like dotLess.

IBundleOrder

Implement this interface to enable custom sorting of files while bundling. In general while bundling JavaScript files, you wight want to include the JQuery Framework files first and then include your library files after that in a given order so that none of the references are impacted. To enable this custom sorting you can extend this interface, In our example we will extend this interface to enable file based sorting of asset files. We will place a “bundle.txt” inside a folder and the IBundleOrder implementation will look for this file and order the assets based on the file order mentioned in the file.

MVC Helpers : Helpers to Use Bundles on a Page

We will take a master and child layout based approach to asset bundles. This will help us have multiple bundles added to framework and yet use only the required ones on a page, based on the layout used by current page. Apparently this will help us save on page load time. Normally adding all assets to framework and then using the current bundle list will output even the assets thats not required on a given page. The technical approach here will require us to add assets from sub-layouts to current http context and then output them on the master layout. This approach will help us have multiple sub-layouts, which controls assets required for a set of pages, and still have a master which can control the page layout.

Possible Enhancements

It is quite possible that you can inject compilers, orderers and minifiers at runtime, this wil further make the optimization framework generic and flexible to any kind of assets or change in any SEO approaches.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s