DCSIMG
Compress and Consolidation of JavaScript and CSS files for .NET - Rotem Bloom's Blog

Rotem Bloom's Blog

Share knowledge on .NET and web development

News

About Me

Glad to help and share knowledge on .NET and also huge fan of Dream Theater.

Contact me via messenger

View Rotem Bloom's profile on LinkedIn

Dream Theater Pics

Blogs I Read

Compress and Consolidation of JavaScript and CSS files for .NET

Hi,

There is cool open source project in codeplex called: Javascript and CSS Consolidation for ASP.NET that give infrastructure for compress and consolidation JS and CSS files for ASP.NET application.

Project Description

A library for ASP.NET that provides an easy way to consolidate external javascript and css files. The primary goals for this project are:

* Make the development environment mirror production as much as possible (e.g. files should be consolidated in all environments including the local dev box)
* Allow the developer to organize their scripts and styles in as many files as they please without compromising on performance
* Make the process seemless for the developer so that they can edit their files and immediately have them included on the next page request (without the need to build or run an external tool)
* Have it all integrate nicely with ASP.NET and MSBuild

Introducation

As the web progresses and AJAX becomes more and more popular, the amount of javascript in a typical website is growing. As a result, being able to manage your scripts (and css) is becoming critical. From the developer's point of view, you want to be able to organize your code into lots of files and freely include comments in your scripts where necessary. However, as a website grows, having lots of script includes and comments in the scripts has a significant effect on performance for the end user. (more round trips for the browser and larger files to download). What is ideal then, is to be able to break out your scripts into as many files as you want, adding as many comments as you would like, and then put your scripts through a packaging process so that when the website runs, it includes all of your scripts as one or two larger files with all of the comments and insignificant whitespace taken out). Out of the box, ASP.NET does not give you much help in this area, and while there are plenty of libraries out there that can compress and consolidate scripts, automating them and integrating them into your environment is not always easy. This library exists to make that process seem less.

How It Works


This library provides a configuration section where you can create groups in which your .js and .css files will be included on your page. The groups are specified using regular expressions. Here is an example of a config section:

<almWitt.web.resourceManagement consolidate="true">
	<clientScripts compress="true">
		<group consolidatedUrl="~/controls.js">
			<include>
				<add pattern=".ascx.js"/>
				<add pattern=".aspx.js"/>
			</include>
		</group>
		<group consolidatedUrl="~/default.js">
			<!-- no include so everything is included except that which is explicitly excluded -->
			<exclude>
				<add pattern="~/thirdpartyscripts/"/>
				<add pattern="~/scripts/ExcludedScript.js"/>
			</exclude>
		</group>
	</clientScripts>
	<cssFiles>
		<group consolidatedUrl="~/allstyles.css">
			<include>
				<add pattern=".css"/>
			</include>
		</group>
	</cssFiles>
</almWitt.web.resourceManagement>

You can find the project here.

 

 

Comments

Avi Pinto said:

thanks man, i have just started to think about doing something with all the js files in our projects...

# October 12, 2008 12:39 PM

Rotem Bloom said:

Thanks for the comment Avi. You can also use the ScriptManager of .NET 3.5 if you want to Combine JS files. The is a new property that called: CompositeScript.

<asp:ScriptManager ID="ScriptManager1" runat="server">

<CompositeScript>

 <Scripts>

    <asp:ScriptReference Path="~/Scripts/script1.js"/>

    <asp:ScriptReference Name="MicrosoftAjax.js"/>

    <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" />

  </Scripts>

</CompositeScript>

</asp:ScriptManager>

# October 13, 2008 2:14 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Enter the numbers above: