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 3, 2011 11:20 PM by hajan

Comments

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

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

Very nice, thank you!

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

Tuesday, October 4, 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 4, 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 4, 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 4, 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.

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

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

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

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

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

Very useful,thanks!

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

Friday, October 7, 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 7, 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 7, 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 7, 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! ;)

Leave a Comment

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