JavaScript and CSS versioning and minifying

13 ביולי 2011

one comment

if you developed web sites before JS and CSS versioning issues must be familiar to you.

Versioning

The problem

You've gone live! Congratulations! You've got a great web site that include external JavaScript and CSS files.

Now you found a bug in your jQuery function or maybe you would like to implement a new style change.

Because the web browser download these files (images, static htmls, JS and CSS files and etc) the update won't be reflected upon the user's browser.

The solution

Implementation a versioning mechanic for the files will include the version number in the filename and therefore the browser will consider this as a new file and will

Download it.

Minifying

The problem

JavaScript and CSS file can become quite large at times. If you think about most the files include white spaces that can be removed / compressed and save

Loading time from the user.

The solution

Minifying files usually used an algorithm for compressing not only the white spaces but reduces variable names and etc.

Introducing Client dependency framework

ClientDependency is a framework from Codeplex.

Using a single library file and some configuration you'll be set to go, here are the steps to get you going:

1. Update the web.config file

· add config section:

<section name="clientDependency" type="ClientDependency.Core.Config.ClientDependencySection, ClientDependency.Core"/>

· add http handler and module

<httpHandlers>
 <add verb="*" path="DependencyHandler.axd" type="ClientDependency.Core.CompositeFiles.CompositeDependencyHandler,
 ClientDependency.Core "/>
</httpHandlers>

<httpModules>
 <add name="ClientDependencyModule" type="ClientDependency.Core.Module.ClientDependencyModule, ClientDependency.Core"/>
</httpModules>

· add reference to the external config file

<clientDependency configSource="config\ClientDependency.config" />

2. add the configuration file and set the version number (checkout the documentation in the link below for more details)

3. add the dependency loader at the master page or web page

<CD:ClientDependencyLoader runat="server" id="Loader" >
  <Paths>
  <CD:ClientDependencyPath Name="Styles" Path="~/Styles" />
 <CD:ClientDependencyPath Name="JS" Path="~/Scripts" />
  </Paths>
</CD:ClientDependencyLoader>

4. set the JS and CSS files

<CD:CssInclude runat="server" ID="siteCss" FilePath="~/Styles/Site.css" />
<CD:JsInclude runat="server" ID="GeneralJs" FilePath="/Scripts/General.js" />

Here's how the scripts in the page source would look like:

<link rel="stylesheet" type="text/css" href="DependencyHandler.axd?s=L1N0eWxlcy9TaXRlLmNzczs%3d&amp;t=Css&amp;cdv=2" />
<script type="text/javascript" src="DependencyHandler.axd?s=L1NjcmlwdHMvR2VuZXJhbC5qczs%3d&amp;t=Javascript&amp;cdv=2">
</script>

Checkout ClientDependency project page for download and documentation details.

Add comment
facebook linkedin twitter email

Leave a Reply to backlinks Cancel Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

one comment

  1. backlinks21 בספטמבר 2012 ב 10:32

    hello!,I like your writing so much! share we communicate more about your post on AOL? I require an expert on this area to solve my problem. Maybe that's you! Looking forward to see you. http://fiverr.com/worldofseo

    Reply