main banner

Development

Web Optimization Minification and Bundling Resources

There are several techniques to enhance the overall behavior of a website. The purpose of this article is to review Minification and Bundling of resources like CSS and Javascript and the tools that are available at the moment for doing it.


Minification
It refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

Bundling
It refers to the process of merging resources into one file. The advantage gained is that the number of requests for resources is reduced.
 
Evaluated Tools

Bundler

Requirements: Bundler has two dependencies, Microsoft Ajax Minifier and Bundle Transformer: Core.
Installation: Get via NuGet.
Runs at development-time on file saved, on post-build or when manually run.
Functions: Compiles, minifies and combines less, sass, stylus, css, coffescript, livescript, js.

Bundler is an open source, cross-platform, command-line runner integrated to Visual Studio vía NuGet that statically compiles, minifies and combines components like less, sass, stylus, css, coffeescript, livescript and js files.

Setup

You basically want to run Bundler when a file your website reference has changed, so you can see those changes before your next page refreshes. Although bundler.cmd is just a simple command-line script, there are a few different ways you can run it during development:

1.-Automatically on save of a .less, .css, .sass, .js, .coffee and .bundle (after the 2010 VS.NET Extension is installed).
2.-Add a Post-Build event to your project to automatically run it at the end of every build.
3.-Add an External Tool in VS.NET that runs bundler.cmd. Optionally assign a short-cut so you can run with 1 key-stroke.

How it works

You define css or js bundles (in plain text) which specify the list of files you wish to bundle together. Running bundler.cmd (either as a short-cut key or post-build script) will scan through your /Content folder finding all defined .js.bundle and .css.bundle definition files which it goes through, only compiling and minifying new or modified files.

Now everytime you run /bundler/bundler.cmd it will scan these files, compiling and minifying any new or changed files.

RequestReduce

Requirements: .NET framework 3.5.
Installation: Get vía NuGet.
Runs at run-time on IIS.
Functions: Allows any IIS based website to automatically sprite background images into a single optimized PNG as well as combine and minify CSS and Javascript with absolutely no coding beyond a few configuration tweaks.

RequestReduce exercises common best practices when serving its javascript, css and sprited images ensuring that the appropriate caching headers are sent to the browser, so that browsers will not need to pull down a new http response until absolutely necessary.

RequestReduce Makes your website faster - sometimes much faster - with almost no effort.
 
  • Auto generates sprites from your background images.
  • Optimizes Sprite PNG format and compression.
  • Minifies CSS and Javascript.
  • Optimizes caching headers and ETags.
  • Runs on any IIS web site including Classic ASP and PHP.
  • Can sync content across multiple web servers.
  • Works well with CDNs.
  • Compiles less, sass and coffeescript.


    RequestReduce Core
     

  • Microsoft Ajax Minifier licensed under Apache 2.0 : http://ajaxmin.codeplex.com/
  • StructureMap by Jeremy D. Miller, The Shade Tree Developer and Joshua Flanagan licensed under Apache 2.0 : http://structuremap.net/structuremap/
  • nQuant by Matt Wrock licensed under Apache 2.0 : http://nquant.codeplex.com.


    YUICompressor .NET MSBuild Task 

    Requirements: .NET.
    Installation: Get vía NuGet.
    Runs on post-build or when manually run.
    Functions: Compresses and minifies CSS and Js files.

    This is a .NET port of the Yahoo! UI Library's YUI Compressor Java project. The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.

    Main Features

  • Compress and/or Bundle Javascript and/or Cascading StyleSheets.
  • 1 source file -> 1 destination file (that's just compression).
  • Multiple source files -> 1 destination file (compression and bundling).
  • Multiple source files -> multiple destination files (so you're pro at this now?!).
  • Optional MSBuild Tasks, NAnt Tasks and MVC4 BundleTransform.


    ASP.NET Web Optimization 

    Requirements: .NET
    Installation: get vía NuGet
    Runs on post-build or when manually run
    Functions: compresses and minifies CSS and Js files.

    The ASP.NET Web optimization framework provides services to improve the performance of your ASP.NET Web applications.

    Current services provided by the framework include:
  • Bundling - combining multiple scripts or style resources together into a single resource, and thereby requiring browsers to make fewer HTTP requests.
  • Minification - making scripts or styles smaller using techniques such variable name shortening, white space elimination, etc.


    Visual Studio Web Essentials Extension

    Web Essentials is a Visual Studio extension that provides an interesting number of features focused on enhancing the productivity of the developers and the use of best practices for CSS and Javascript.

    To get Web Essentials extension on your Visual Studio follow the further steps:

    1.-Open Visual Studio.
    2.-Go to Tools menu.
    3.-Select Extension Manager.
    4.-Pick Online Gallery on the left side of the prompt window.
    5.-Search for ‘Web Essentials’.
    6.-Select Web Essentials on the results and click on Download button.
    7.-Once downloaded an install window will appear, click on the Install button.
    8.-When the installation process is completed hit the Restart Now button .
    9.-A browser window with the details about the version of the Web Essentials extension installed will open.

    Key Features

    JavaScript
  • JSHint is a very configurable tool that helps developers follow certain guidelines and best practices.
  • Adds intellisense support on JS files.
  • Creates a minified version of any JS file in Solution Explorer to produce a *.min.js file. Whenever the source .js file is changed, the .min.js file is updated accordingly.
    Stylesheets
  • Adds intellisense support to CSS files.
  • Adds visual cues live.
  • Converts color formats, DataURIs and background Images.
  • Creates a minified version of any CSS file in the Solution Explorer or a section of the CSS.


    Bundle Files
    Select any two CSS or JS files and bundle them into a single merged file which also creates a minified version of the code. The most interesting part is that developers can modify the sources of the bundle and all changes will be reflected all the way down to the .min file which means that we only need to reference this file on the html code. This reduces significantly the load time of the web pages.





  • Mario G.

    With over 10 years of experience on the .NET, Web and Front End development, Mario is the kind of guy who will guide you to any technical doubt or situation you might encounter; he’ll have the right advice and the best funny story like “once I was traveling by bus from Durango to Guadalajara, I fell asleep and woke up in Saltillo…” Born in Durango, he is a Computer Systems Engineer who loves Video Games, hiking and motorcycles.

    Articles