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 the file saved, on post-build, or when manually run.
Functions: Compiles, minifies, and combines less, sass, stylus, CSS, CoffeeScript, 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 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:
- Automatically on save of a .less, .css, .sass, .js, .coffee and .bundle (after the 2010 VS.NET Extension is installed).
- Add a Post-Build event to your project to automatically run it at the end of every build.
- 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 every time 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 spirited 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 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 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 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:
- Open Visual Studio.
- Go to the Tools menu.
- Select Extension Manager.
- Pick Online Gallery on the left side of the prompt window.
- Search for ‘Web Essentials’.
- Select Web Essentials on the results and click on the Download button.
- Once downloaded and install window will appear, click on the Install button.
- When the installation process is completed hit the Restart Now button.
- 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 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.
