Javascript and CSS Optimization with SharePoint
It is a common practice to minimy Javascript and CSS files. This is achieved by removing whitespace and unncesssary characters (like comments) from the files to make the footprint as small as possible. I will demonstrate how to leverage this technique in your everyday SharePoint development environment.
Download and install the JS/CSS minifier from http://ajaxmin.codeplex.com
Download and open the sample project from http://code.sukul.org/Public/SharePoint%202010/Minification/MinificationExample.rar
Open the MinificationExample.sln file
Observe the MinificationExample.debug.css and MinificationExample.debug.js files. These are the "original" uncompressed files.
Right click on the Project name and click Properties. Observe the Pre Build Event calls for minifying the javascript and CSS files.
Build the project. You will notice 2 new files: MinificationExample.css and MinificationExample.js minified files
Reference the CSS and JS files in your UI using the ScriptLink and CSSLink controls:
When you run the application in debug mode (by pressing F5), the debug version of the javascript file will referenced
When you run the application without debugging(by pressing CTRL+F5), the minified version of the JS file gets loaded. Make sure that you remove the debug setting from the web.config file in this section:
<compilation batch="false" debug="false" optimizeCompilations="true">
Keywords: SharePoint 2010 Javascript CSS Minifiy Minification Optimization Compression
Copyright 2012 Shailen Sukul