Comments on: Automatically minify and combine JavaScript in Visual Studio

By: Lee Dumond

Lee Dumond — Mon, 01 Mar 2010 15:20:44 +0000

Email, Dave addresses the dependency issue in the post by suggesting appending file names with numeric prefixes, such as 01, 05, 10, and so on. You definitely need to do that in most cases, since the combining order is important.

By: Emil Birgersson

Emil Birgersson — Mon, 01 Mar 2010 15:07:41 +0000

Great article, simple and neat solution! One question/comment about the order which the scripts are minified and combined. In your example above, you want the scripts to be evaluated in the following order: jquery.js, jquery-templates.js and finally default.js right? When you run the post-build-script event “type *.debug.js” | … isn’t the first occurring file in the vs-project structure (alphabetical sort-order?) included first? I don’t know if this matters or not(?) if yes, one would have to make sure the sort-order of the files in the Visual Studio project corresponds to the desired “order of execution”, eg by naming the files to be minified/combined like: a-jquery.js, b-jquery-templates.js, c-default.js?

Thanks!

By: Dave Ward

Dave Ward — Sun, 21 Feb 2010 19:15:02 +0000

It’s actually even better than that, because the CDN serves it with a +1 year expires header. The browser won’t even check for a 304; it will immediately use the cached copy on disk.

By: Lee Dumond

Lee Dumond — Sun, 21 Feb 2010 19:13:04 +0000

Thanks Dave, that’s what I figured. There’s probably at least a 50% or better chance that the CDN request will be a 304 anyway.

By: Dave Ward

Dave Ward — Sun, 21 Feb 2010 18:20:57 +0000

I think the jQuery CDN’s benefits outweigh the drawback of the second request. Google serves it so much faster than any hosting I’ve measured it against, the extra HTTP/DNS request is a wash for most users. The very real potential of a new user hitting your site with it already cached makes the separate reference a good investment.

By: Lee Dumond

Lee Dumond — Sat, 20 Feb 2010 08:42:38 +0000

Dave,

Just curious how you might reconcile using this technique along with the advice you offer about using the Google CDN:

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Obviously, combining scripts requires that they all be hosted locally. So, is using a local copy of jQuery and minifying / combining it in a build task (along with your other scripts, of course) actually faster than using the CDN?

Or perhaps a combination of the two techniques? i.e. – using the CDN for jQuery, but minifying/combining everything else (custom JS, plugins, json2 parser, etc), then having two script includes (CDN plus bundled).

Interested to hear your take on this.

By: niaher

niaher — Fri, 29 Jan 2010 11:46:37 +0000

I have spent the last 2 days making a research about automating js/css minification/combining. The best solution I have found is by using this MSBuild tool: http://yuicompressor.codeplex.com/. This tool relies on a technique that is very similar to the one described in this article. The advantage is that everything is more automated, hence easier & faster for us, developers.

By: How to minimize and combine your JavaScript on Compile using Visual Studio « Mitch Labrador's Tech Blog

Wed, 09 Dec 2009 17:22:13 +0000

[...] Thanks to Dave Ward for the original idea http://encosia.com/2009/05/20/automatically-minify-and-combine-javascript-in-visual-studio/ [...]

By: links for 2009-10-28 - sashidhar.com

links for 2009-10-28 - sashidhar.com — Wed, 28 Oct 2009 09:05:52 +0000

[...] Automatically minify and combine JavaScript in Visual Studio | Encosia (tags: javascript compression visualstudio asp.net performance jquery) [...]

By: Kelvin Foo

Kelvin Foo — Wed, 28 Oct 2009 03:21:37 +0000

I wrote a simple batch file to compress multiple files with YUI Compressor.

All you need to do is call..

multicompress.bat output.min.js input1.js input2.js input3.js input4.js … input9.js

of course you need to modify the batch file to suite your paths.

compress.bat
–
@echo off
“C:\Program Files (x86)\Java\jre6\bin\java.exe” -jar “C:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar” %1 %2 %3 %4 %5 %6 %7 %8 %9
–

multicompress.bat
–
@echo off
if not !%1==! del %1
if not !%2==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %2 >> %1
if not !%3==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %3 >> %1
if not !%4==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %4 >> %1
if not !%5==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %5 >> %1
if not !%6==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %6 >> %1
if not !%7==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %7 >> %1
if not !%8==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %8 >> %1
if not !%9==! call “C:\Program Files\yuicompressor-2.4.2\build\compress.bat” %9 >> %1
–

By: Dave Ward

Dave Ward — Thu, 22 Oct 2009 13:42:47 +0000

I don’t know of an easy way to automate that.

If possible, you should refactor those inline scripts out into an include file. The caching gain from that will be greater than the gain from minification (and then you can easily minify it too).

By: Performance: Automatically minify java script files with Visual Studio. - Yevgeni Frolov

Wed, 21 Oct 2009 07:25:10 +0000

[...] So I’ve found that grate article by Dave Ward that describes a way to integrate automatic java script file minifying into development lifecycle “Automatically minify and combine JavaScript in Visual Studio”. [...]

By: Chris Woodward

Chris Woodward — Wed, 21 Oct 2009 03:24:07 +0000

Important addendum to my last post:

You’ll need to use ‘echo’ instead of ‘type’ in the build event to avoid a non existent pipe error.

By: Chris Woodward

Chris Woodward — Wed, 21 Oct 2009 03:20:07 +0000

If you want to use YuiCompressor in the same way that JSMin is used here I wrote an exe to do it.

using System;
using System.IO;
using Yahoo.Yui.Compressor;
 
namespace YuiCompress
{
 class Program
 {
  static void Main(string[] args)
  {
   string path = Console.In.ReadLine().Trim();
   if (!path.EndsWith(".js") &amp;&amp; !path.EndsWith(".css"))
    return;
 
   string folder = path.Substring(0, path.LastIndexOf('\\'));
   string files = path.Substring(path.LastIndexOf('\\') + 1);
 
   foreach (var file in Directory.GetFiles(folder, files))
   {
    using (StreamReader input = File.OpenText(file))
    {
     string code = input.ReadToEnd();
     if (!string.IsNullOrEmpty(code))
     {
      if (file.EndsWith(".js"))
       Console.Out.Write(JavaScriptCompressor.Compress(code, false));
      else
       Console.Out.Write(CssCompressor.Compress(code));
     }
    }
   }
  }
 }
}

By: LG

LG — Sun, 18 Oct 2009 13:10:32 +0000

Dave,
Can you please tell me, how can we do the same for .aspx files which has js functions included in it