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.
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 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.
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.
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.
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.