Squish your CSS and JS files in your ASP.NET web apps

SquishIt is a nice library that helps you nicely minify your CSS and JavaScript files with very small effort.

The tool works perfectly fine in both ASP.NET WebForms and ASP.NET MVC and is available to get & install using NuGet package manager.

Open NuGet package manager or NuGet Manager PowerShell Console..

NuGet package manager:

 

As you can see, SquishIt is available for both ASP.NET and ASP.NET MVC.

NuGet PowerShell Console:


Now, lets add our CSS and JS files that we want to Squish.

SquishIt has two functions for CSS and JavaScript. The method Render does the squishing. As you can see, we use ‘#’ where the method will auto-generate unique id for the script.

Once you run your web, open source code and check the rendered CSS/JS files

Since SquishIt works based on the Debug setting in Web.config

<compilation debug="true" targetFramework="4.0"/>

change the debug setting to false and run the web again…

Now, if you open the source code in your browser, you will see two files for both, CSS and JS files squished!

You will see that SquishIt has created the new files in the respective folders

If we open the squished file, you will see it is minified

SquishIt works exactly the same way for ASP.NET MVC!

Hope this was helpful.

Regards,
Hajan

Published Monday, October 03, 2011 11:20 PM by hajan
Filed under: , , , ,

Comments

# re: Squish your CSS and JS files in your ASP.NET web apps

Monday, October 03, 2011 5:32 PM by gnosys

Very nice, thank you!

# Squish your CSS and JS files in your ASP.NET... | ASP.NET | Syngu

Tuesday, October 04, 2011 1:40 AM by Squish your CSS and JS files in your ASP.NET... | ASP.NET | Syngu

Pingback from  Squish your CSS and JS files in your ASP.NET... | ASP.NET | Syngu

# The Morning Brew - Chris Alcock &raquo; The Morning Brew #951

Tuesday, October 04, 2011 3:57 AM by The Morning Brew - Chris Alcock » The Morning Brew #951

Pingback from  The Morning Brew - Chris Alcock  &raquo; The Morning Brew #951

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 4:31 AM by mcsdwarken

When does unique ID change?

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 5:12 AM by hungrykiwilady

SquishIt Framework works well esp with MVC projects and from personal experience, it definitely improved the website's performance.

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 6:03 AM by Dan Atkinson

This looks really good, but how smart is it? If you want to 'squish' your library (jQuery, Prototype et al) with your files, won't that result in the user having to download the library with each page that requires a different set of scripts, since the hash will change?

So is there a way to mark a file (or sets of files) as 'global' files' that can be grouped in single or larger sets, and then page-specific scripts/styles that can be done separately?

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 6:08 AM by vijayantkatyal

thank you !! Very helpful post.

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 10:48 AM by Quentin

@mcsdwarken: In our experience, it only changes when the app pool is restarted and the js or css files have changed.  It is unfortunate that it does not seem to regenerate a new file simply when the js or css have changed.  We also find that using SquishIt requires altering folder permissions (complicating deployment), and we also feel we've ran into some sort of race bug from time to time that requires an app pool restart to remedy.

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 10:51 AM by Quentin

@Dan Atkinson: You would simply squish into multiple bundles.  You would have one Bundle.JavaScript call for more stable files - jQuery, modernizer, etc. - and it could output to "~/scripts/libs.js" and you'd have another call to Bundle.JavaScript for all your app-specific files.  It seems like loading jQuery and similarly popular libs would be better done from a public CDN to utilize client side caching, however.

# Elegant D &raquo; Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230;

Tuesday, October 04, 2011 12:16 PM by Elegant D » Squish your CSS and JS files in your ASP.NET web apps – Hajan …

Pingback from  Elegant D   &raquo; Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230;

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 1:57 PM by hajan

@mcsdwarken, @Quentin, as far as I know, the current version of SquishIt changes each time you make change to your JS file. Personally, I have tested this and it works fine. And not only that, it seems and plays very smart.

If you squish the scripts, it will generate new file with guid. Then, if you make changes in your scripts, it will squish the scripts again in new file... Now, if you revert back the scripts to the previous state (the same as they were squished for first time), SquishIt won't generate new squished script file but will change the reference to the one created the first time. What I have found problematic is that if you delete the squished file, then you have to restart your app or restart the app pool.

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 2:04 PM by hajan

@Dan, as ~Quentin said, you can use CDN to utilize client side caching, however as I have explained in my previous comment, SquishIt won't really generate new files each time a page in your web is requested, on the contrary... it plays pretty smart regarding the way it manages the squished files. So, if you make changes to your JS/CSS files, it should regenerate them with new GUID, but it won't do that each time your visitor accesses your website... You can group your files if you want, even though I wouldn't do that since we use SquishIt for performance optimization and for merging all the files in as few as possible...

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 04, 2011 2:45 PM by Gregg

If it also works with the "magic strings" created with T4MVC, that would be wonderful!

# xhtml css templates &#8211; Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | XHTML CSS - Style sheet and html programming tutorial and guides

Tuesday, October 04, 2011 3:00 PM by xhtml css templates – Squish your CSS and JS files in your ASP.NET web apps – Hajan … | XHTML CSS - Style sheet and html programming tutorial and guides

Pingback from  xhtml css templates &#8211; Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | XHTML CSS - Style sheet and html programming tutorial and guides

# Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | css tutorial videos

Wednesday, October 05, 2011 5:14 AM by Squish your CSS and JS files in your ASP.NET web apps – Hajan … | css tutorial videos

Pingback from  Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | css tutorial videos

# re: Squish your CSS and JS files in your ASP.NET web apps

Wednesday, October 05, 2011 7:58 AM by webdiyer

Very useful,thanks!

# Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | Blog | Sobhansoft Programming and ICT Services

Wednesday, October 05, 2011 5:45 PM by Squish your CSS and JS files in your ASP.NET web apps – Hajan … | Blog | Sobhansoft Programming and ICT Services

Pingback from  Squish your CSS and JS files in your ASP.NET web apps &#8211; Hajan &#8230; | Blog | Sobhansoft Programming and ICT Services

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 7:11 AM by Jalpesh P. Vadgama

Hello Hajan,

Nice blog. Which one is better Ajax Minifier or squish it.

Best Regards,

Jalpesh

<A herf="http://www.dotnetjalps.com">www.dotnetjalps.com</A>

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 7:18 AM by Krishnamurthi Kanagasubramanian

Hi,

  Your sample is simply great.

I am using the <asp:ScriptManager /> with the <CompositeScript> script to combine the given scripts and to response as single response.

   Is Squish do the same? If not what is the advantage with it?

   ScriptManager is having URL length restriction when refereing the number of scripts.

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 8:27 AM by hajan

@Gregg... I am not sure, but I will try it soon...

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 8:33 AM by hajan

@Jalpesh, both of them work with JS and CSS files and both of them work absolutely fine. As you can see in one of the print screens in this post, SquishIt uses Ajax Minifier, YUICompressor.NET and dotless... When installing SquishIt with NuGet, these are installed as dependent libraries...

Hope this helps.

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 8:56 AM by hajan

@Krishnamurthi, SquishIt does pretty much the same. The thing is that by default you don't have ScriptManager in ASP.NET MVC. There are some ScriptManager plugins that does pretty much the same as the one for WebForms, but I am not sure if they provide script combining ability. Also, SquishIt combines + minifies the script and uses aggressive minification approach (as fewer lines of code as possible and reducing the script size at max.)...

Also, ScriptManager is intended for registering and working with JS files and has other features too. SquishIt is only for combine + minify for both JS and CSS files.

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 7:12 PM by Matt Wrock

Also check out RequestReduce available on Nuget and http://www.RequestReduce.com.  It combines and minifies CSS on the fly and next week's release will include javascript. It also will sprite background images as well as optimize the compresion and color palette of the images. It manages ETAG and expires headers as well. It is compatible with any IIS based web site and requires no code changes or asset reorganization. It requires little to no configuration in basic environments and also provides support for web farms and CDNs. It's OSS (Free) and is currently used on some Microsoft web sites like the Visual Studio Gallery.

# re: Squish your CSS and JS files in your ASP.NET web apps

Friday, October 07, 2011 8:19 PM by hajan

@Matt, thank you for the nice info about RequestReduce. I will surely try it within the next few days! ;)

# Articles &#8211; October 11, 2011 | Mark Richman

Tuesday, October 11, 2011 2:03 AM by Articles – October 11, 2011 | Mark Richman

Pingback from  Articles &#8211; October 11, 2011 | Mark Richman

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, October 11, 2011 2:37 PM by A Little Birdie

Is there any benefit to using this vs. Chirpy?  As far as I can tell, Chirpy offers the same functionality, but without libraries to add to my project, and without gibberish filenames.  http://chirpy.codeplex.com/

# re: Squish your CSS and JS files in your ASP.NET web apps

Tuesday, November 15, 2011 11:09 PM by Adrian Lanning

Those gibberish filenames are important. They allow for the use of Far Future caching [1].  Without the filenames being automatically incremented or hashed in some way, the developer needs to manually update the name after each change or risk the end user receiving stale content.  I've done the manual update thing before and it is a real pain...  I really appreciate what Justin has put together in SquishIt.

1. developer.yahoo.com/.../rules.html

Leave a Comment

(required) 
(required) 
(optional)
(required)