javascript css 合并压缩SquishIt – The Friendly ASP.NET JavaScript and CSS Squisher

I’ve received more feedback via e-mail on SquishIt than on pretty much any other post or project I’ve ever worked on in the past. I appreciate it! Most all of the feedback has been extremely positive, with people thanking me for creating such a great tool. Well, I don’t know how great it is, but people seem to like it!

Anyways, the one complain that I keep hearing over and over again is that I need to create a better guide to using it. And I agree, even though SquishIt is a breeze to use, I still need to provide a better "getting started" document.

But before I start rambling, let’s get on with the tutorial….

Getting Setup With SquishIt

As a side note, there are quite a few more options that SquishIt provides to tweak the squishing experience, but this post just covers the basic options for squishing your CSS and JavaScript.

The first thing that you need to do is head over to the SquishIt download page on GitHub and grab the zip file for the latest build of SquishIt. If you want, you could also grab the source and build it from there. Your choice!

The next step is to grab a current ASP.NET or ASP.NET MVC project. You could also create a new one, like I am going to do for this post. I’m first going to create a folder for my project, and inside of that folder I am going to create my usual “src” and “lib” folders, like this:

In the “src” folder I just have my project source, and in my “lib” folder is where I am going to drop any third party libraries that my project uses. Inside of my “lib” folder I am going to create a “SquishIt” folder:

And then put the contents of the zip file I downloaded from GitHub in there:

Now we are ready to get started in our website!

Getting Your JavaScript And CSS Setup

Now that we have the SquishIt binaries in the site, we can go over into Visual Studio and start getting everything wired up. The first thing we need to do is to get some CSS and JavaScript into our project. I’m going to pull in the uncompressed CSS from the 960 Grid System project, and then an unminified copy of jQuery and jQuery UI:

Note: Here I am using a Web Forms project, because I want to show that even though this was originally designed with ASP.NET MVC in mind, it works just the same in Web Forms!

Let’s first integrate the CSS and JavaScript into the website in the normal fashion, this will let those who are migrating their sites do it a bit easier.

First we will add tags to reference both the CSS and JavaScript in the page:

?

1 2 3 4 5 6 7 8 9 10 11 12

< head runat = "server" >      < title ></ title >      < link type = "text/css" rel = "stylesheet" href = "/css/reset.css" />      < link type = "text/css" rel = "stylesheet" href = "/css/text.css" />      < link type = "text/css" rel = "stylesheet" href = "/css/960.css" /> </ head > < body >      < form id = "form1" runat = "server" >      </ form >      < script type = "text/javascript" src = "/js/jquery-1.4.2.js" ></ script >      < script type = "text/javascript" src = "/js/jquery-ui-1.8.1.js" ></ script > </ body >

Next, we will look in the Chrome developer tools to see just how much CSS and JavaScript that we are passing across the wire:

So, 11KB of CSS and 560KB of JavaScript, that is a ton! Let’s go ahead and see if we can do something about that.

Integrating SquishIt Into Your Website

The next thing we need to do is add a reference to the SquishIt.Framework.dll from the web project:

After we have created a reference, now we are ready to squish some Css and JavaScript! The first thing you are going to want to do is to import the SquishIt namespace at the top of the page:

?

1	<%@ Import Namespace="SquishIt.Framework" %>

Now we can create a Bundle. A Bundle is a single group of files that will be compressed into a single file. In this first example we are going to create a CSS bundle:

?

1 2 3 4 5 6

<%= Bundle.Css()          .Add("~/css/reset.css")          .Add("~/css/text.css")          .Add("~/css/960.css")          .Render("~/css/combined_#.css") %>

In this code we are starting with the Bundle class, and then calling the "Css" method which lets us start a CSS bundle. Next we just call the "Add" method over and over with each file we want to add. Notice that I have put the tildes (~) on the front of each path, SquishIt will automatically expand app relative paths in websites. And finally we call the "Render" method which writes the bundle out to a particular file.

Also notice that we have the "_#" in the output file name. This will cause bundler to render a hash of the file contents into the filename. This allows us to invalidate the file if a change is made to one of our CSS files. If you don’t include that in there, then the hash is appended as a querystring parameter. This will also work for invalidating the file, but could cause some caching proxies not to cache the file. On the flip side though, if you keep changing files a lot, you could build up a bunch of combined CSS files in your folder since the file name keeps changing. You’ll have to manually clean them out.

Now that we have squished our css, we can do the same thing for the JavaScript:

?

1 2 3 4 5

<%= Bundle.JavaScript()          .Add("~/js/jquery-1.4.2.js")          .Add("~/js/jquery-ui-1.8.1.js")          .Render("~/js/combined_#.js") %>

Looks very similar, right? We just do the exact same thing.

WAIT YOU’RE NOT DONE YET!

I have one little catch that you need to know about. If you are like me, then you probably have your web.config set to debug="true" most of the time. And if you do, then when you run it, you are going to see the references to the JavaScript and CSS files spit out normally and they won’t be compressed. This is because trying to debug and develop with compressed CSS and JavaScript is a HUGE pain in the butt. In fact, it is practically impossible. So when you are operating in debug mode in your website, SquishIt keeps the files uncompressed and separated.

If you set to debug="false" you will get the combined and compressed JavaScript and CSS, or you can call the "ForceRelease" method like this:

?

1 2 3 4 5 6 7

<%= Bundle.Css()          .Add("~/css/reset.css")          .Add("~/css/text.css")          .Add("~/css/960.css")          .ForceRelease()          .Render("~/css/combined_#.css") %>

Great! Just remember since SquishIt caches everything, if you make a change like this, you’ll need to restart your site by poking the web.config or some other method.

Now you’re ready to squish some CSS and JavaScript!

When we run the website, we will now see only a single CSS and JavaScript reference, and when we look in the Chrome developer tools to see how much JavaScript and CSS we are passing, we get a much better picture:

Phew. We got almost a 50% reduction in size! PLUS, just as importantly, we got three less http requests. Not bad for 5 minutes of work! If we had a production site, which might have dozens of JavaScript files, this could be an enormous time saver.

Finally

I hope you see how easy it is to integrate SquishIt into your website. In only a few minutes you can be up and running with all of your JavaScript and CSS being combined and compressed. It makes your life much easier, and your users will thank you!