SquishIt
SquishIt is a library for ASP .Net implemented by Justin Etheredge of CodeThinked that will take several separate javascript or CSS files and produce a single compacted file as ouput which is then returned to the client, rather than the several individual source files.
This is great as it saves bandwidth by both reducing the number of requests that need to be made, as well as compacting the files by removing excess white space and comments.
Less
One of the additional benefits of using SquishIt is built in support for dotLess. dotLess is a .Net port of the CSS extension Less, which was originally implemented for Ruby. This adds a number of neat features such as variables and mixins, which makes it easier to create well structured and maintainable CSS.
@brand_color: #4D926F;
#header {
h2 {
color: @brand_color;
}
}
Compacted
To make use of Squishit, all we need to do is change how we reference our CSS and javascript files. Instead of including tags in our <head> element, we make a call to Bundle.Css() or Bundle.Javascript() instead:
@MvcHtmlString.Create(Bundle.Css()
.Add("~/Content/style.less")
.Add("~/Content/jq.datatable.css")
.Add("~/Content/jquery-ui-1.8.14.custom.css")
.Add("~/Content/colorbox.css")
.Render("~/Content/Site.min.css"))
@MvcHtmlString.Create(Bundle.JavaScript()
.Add("~/scripts/jquery-1.6.2.min.js")
.Add("~/scripts/jquery.dataTables.min.js")
.Add("~/scripts/jquery-ui-1.8.14.custom.min.js")
.Add("~/scripts/jquery.colorbox-min.js")
.Render("~/Content/Site.min.js"))
In release mode this will combine the separate files into a single file with the specified name, as well as performing minification.
When running with debug on in your web.config (<compilation debug="true">), the files are not combined by default. You can alter this behaviour by chaining a call to ForceRelease() before the call to Render(). Likewise, a call to ForceDebug() can be made to keep everything seperate when doing a release build with debug off.
Using Multiple Layouts
It's not uncommon to have multiple layouts when developing a production web site with MVC3. There is a consideration to be made here, as if you wish to include different CSS / Javascript depending on the current layout, if you use the same output filenames for each layout, it could cause SquishIt to re-minify the files if going from a layout that uses one set of files, to one that uses a different set.
There are two ways round this:
1) Include all CSS and all Javascript for the entire site when bundling. You could extract this to a partial view that is included by each layout so that it only needs updating in one place.
2) Change the name of the output files depending on the view. This will ensure that re-minification only occurs when there are actual changes to the source files.
Permissions
One thing to note is that when using a release build, SquishIt may require write access to the directory containing the target files, which in our case is ~/Content. This is because should any of the source files be updated, SquishIt will want to output a new 'squished' version.
Summary
SquishIt takes all of your javascript, all or your CSS and squishes them into the smallest size it can. This is great in a world of heavily interactive web sites where the weight of scripts and CSS can add significant time to the loading of a page.