What do you use to minimize and compress JavaScript libraries? [closed]

What do you use to minimize and compress JavaScript libraries?


Solution 1:

I've used YUI Compressor for a long time and have had no problems with it, but have recently started using Google Closure Compiler and had some success with it. My impressions of it so far:

  • It generally outperforms YUI Compressor in terms of file size reduction. By a small amount on simple mode, and by a lot on advanced mode.
  • Simple mode has so far been as reliable as YUI Compressor. Nothing I've fed it has shown any problems.
  • Advanced "compilation" mode is great for some scripts, but the dramatic size reduction of your script comes at the expense of a lot of meddling with your code that stands a decent chance of breaking it. There are ways to deal with some of these problems and understanding what it's doing can go a long way to avoiding problems but I generally avoid using this mode.

I've moved over to using Google Closure Compiler in simple "compilation" mode, because it slightly outperforms YUI Compressor in general. I have used it considerably less than I have YUI Compressor but from what I've seen so far I'd recommend it.

One other that I've yet to try but sounds promising is Mihai Bazon's UglifyJS.

Solution 2:

I use YUI Compressor. Seems to get the job done well!

Solution 3:

You have a herd of possibilities here:

  • The YUI Compressor mentioned by other answers,
  • The Google Closure Compiler,
  • The Dojo ToolKit's ShrinkSafe compiler used by their build system,
  • Douglas Crockford's still actual JSMin,
  • UglifyJS mentioned by others,
  • And a commercial solution, javaScript Obfuscator (never used personally)

From my personal experience, I'd recommend that you use the Dojo SDK to build a custom build, which you can then in turn configure to either use their usual ShrinkSafe compiler, or Google Closure, which they now support as well.

In terms of compression, I think Google Closure is the one yielding the best results for me so far, however I am usually satisfied with ShrinkSafe and it's a bit older and more robust, whereas Closure Compiler looks a bit of a new kid on the block (which your stakeholders might not be too fond of, for instance).

Some people swear only by the YUI Compressor though. I personally cannot really vouch for it.

Now if you question was to compress libraries and not just your own JavaScript code, it obviously gets really more involved, as you will need for most of these tools to export the symbols that should not be renamed or stripped. Most decent compressors will remove functions that they think are unused - often the case in a library, if not bound to a project, obviously - and change the names to make them shorter and use less characters - also a problem as you obviously want a public API to not be tampered with.

You can find other threads on this topic as well and find information in the tools' support documentation. You may also want to have a look at JSBuilder2, some sort of pendant to Dojo's Build tool (so, using ShrinkSafe or Closure Compiler) for ExtJS (using the YUI compressor).

(Sorry, being a new SO user, I cannot add more than one link so I cannot link directly to the tools.)

EDIT: regarding the concerns expressed in some answers that compression might introduce bugs and that it makes debugging easier as the code is not mangled: yes, it's a valid concern. However:

  • you will get a very significant improvement in terms of bandwidth if you use a minifier, even with gzip compression activated (and you can learn to leverage gzip compression by making the compressor's life easier
  • you should just taste your code in debug and production mode to ensure the behavior is identical. I mean, it's part of your job as well...
  • some of these compressors have been around for a while and won't really introduce bugs into your code. They're really just re-organizing things and substituting strings, really.
  • some compressors (for instance the dojo build system) come with options to allow you to produce both a compressed and an uncompressed output, so that you can then enable different modes for debugging and production, using query parameters for instance.

Solution 4:

I don't minimize JavaScript at all: gzip compression is good enough for me and has the additional benefit that error messages will still be useful.