What do you use to minimize and compress JavaScript libraries?

Question

What do you use to minimize and compress JavaScript libraries?

Answer 1

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

Answer 2

Here is an article which described how to use YUI Compressor for minimizing files during build: Compressing JS files as part of your build process

Answer 3

Dean Edward's packer achieves some pretty good compression ratios. It has command line implementations which allows it to be used in a continuous integration process.

Answer 4

I use a simple (3-4 line) wrapper script around JavaScript::Minifier::XS.

Answer 5

I have tried YUI compressor before, but it gives me error message.

I suggest using JSMIN to minify your javascript:

http://www.crockford.com/javascript/jsmin.html

Answer 6

I too use YUI Compressor. I have an ant task like this that I use in my projects:

<!--
YUI Compressor tasks 
http://www.julienlecomte.net/yuicompressor/README
-->
<property name="yuicompressor.jar"
           value="C:/devlibs/yuicompressor-2.2.4/build/yuicompressor-2.2.4.jar"/>

<target name="js.compress">
    <!-- Create min directory under js direcrtory if it doesnt exist -->
    <mkdir dir="${js-directory}/min" />

    <apply verbose="true" executable="java" parallel="false" failonerror="true">
        <fileset dir="${js-directory}" includes="*.js"/>
        <arg line="-jar"/>
        <arg path="${yuicompressor.jar}"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="${js-directory}/min/*-min.js"/>
        <targetfile/>
    </apply>
</target>

Answer 7

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.

Answer 8

http://caja.appspot.com/tools/index does all three of HTML/CSS/JS.

Answer 9

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.

Answer 10

UglifyJS is a new one.

UglifyJS compresses better than YUI Compressor and just about on par with the Google Closure Compiler. For example, the compressed version of jQuery from the Google Closure Compiler is only 403 bytes smaller than the version produced by UglifyJS - impressive! UglifyJS is also the fastest to run by a long shot, beating Closure by over 6 seconds!

Additionally, the code produced by UglifyJS is safer than the code that Closure generates. For example, Closure doesn’t know how to deal with eval or with{} - it just logs an error and continues to rename variables anyway. This, obviously, leads to broken code. UglifyJS does not have this problem.

More information can be found here: http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js

Answer 11

https://jawr.dev.java.net/ is excellent for minification and versioning

Answer 12

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.

Answer 13

http://code.google.com/p/jsmin-php/

Good old Doug Crockford :-) The beauty of this is that with cache control you can get somelovely automated compression only when it is required. Or in one of my projects I just output the compressed/gzipped files and delete them when I make a change. For a development environment, I just dont' call the minification script.

Answer 14

I use perl's JavaScript::Minifier. It works pretty well and you can e.g. replace some phrases using perl.

Answer 15

Google's closure tools

You can map the minified version to the regular source code for debugging in Firebug with their add-on.

Answer 16

There is a very good online compressor:

http://javascriptcompressor.com/

You can also shrink variables, if you want even more compresed.

Hope it helps

Answer 17

Here's a solution from Microsoft that you can integrate into Visual Studio to minify the files automatically when you build your project.

To Install:

Download the msi from : http://aspnet.codeplex.com/releases/view/40584

You may need to restart your computer after its finished.

To Use:

Edit your .csproj file and include the following at the end of the file (but before the </Project> tag):

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

<Target Name="AfterBuild">
    <ItemGroup>
        <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
        <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin 
    JsSourceFiles="@(JS)"
    JsSourceExtensionPattern="\.js$"
    JsTargetExtension=".min.js"
    CssSourceFiles="@(CSS)"
    CssSourceExtensionPattern="\.css$"
    CssTargetExtension=".min.css"/>
</Target>

Now when you build your project, all CSS and js files that don't end in .min.js, .min.css will be minified (See the "Exclude" attribute to exclude other files from being minified).