Minifying your CRM 2011 JavaScript and CSS

Minification is a popular technique in web development.  The benefits are equally as applicable to Dynamics CRM 2011 JavaScript and CSS web resources.  My minifier of choice is the Microsoft Ajax Minifier because it integrates well with the Visual Studio 2010 build system.  I’m a proponent of using the Developer Toolkit for Microsoft Dynamics 2011 to develop my customizations through Visual Studio 2010.  If you aren’t using the toolkit, then the Using AjaxMinTask.DLL in your Visual Studio Project instructions will work just fine.  However, if you follow these instructions with a “Dynamics CRM 2011 Package” project, then you will be disappointed when your files don’t get minified.  This project type seems to have some limitations with build automation.  This post shows you a workaround to get it to work.  Make sure you’ve installed the Microsoft Ajax Minifier before following these instructions.

We’ll start with a package project that already has a JavaScript and CSS file called MinifyMe.js that I want to minify:

image

The next step is hackish, but works.  We’re going to add an empty project where we can put our AfterBuild Target from the Using AjaxMinTask.DLL in your Visual Studio Project instructions.  Then we’re going to modify the project file slightly differently to get it all working.  Add a Class Library project to the solution:

image

Follow the first set of instructions from Using AjaxMinTask.DLL in your Visual Studio Project to update your project file with the added XML snippet.  Don’t save/reload your project just yet.  Update the “<JS Include” and “<CSS Include” values to point the the location on disk of your of your “WebResourcesScript (JScript)” and “WebResourcesCascading Stylesheet (CSS)” folders.  Mine look like this:

<JS Include=”=”$(SolutionDir)CrmAjaxMinifierWalkthroughWebResourcesScript (JScript)*.js” Exclude=”***.min.js” />

<CSS Include=”$(SolutionDir)CrmAjaxMinifierWalkthroughWebResourcesCascading Stylesheet (CSS)*.css” Exclude=”***.min.css” />

Here’s a screenshot:

image

Right-click the unloaded project and select “Reload Project”:

image

Build the solution.  Minified files will have been created, but you won’t see them in Visual Studio.  You need to right-click the “Cascading Stylesheet (CSS)” and “Script (JScript”)” folders to add the existing files.  Here’s some screenshots of adding the MinifyMe.min.js file:

image

image

Once you’ve done that, you will have both fully formatted and minified files in your “Dynamics CRM 2011 Package” project:

image

Compare the MinifyMe.js source from the first screenshot to the MinifyMe.min.js file in the last.  The JavaScript has been minified.

@devkeydet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s