What do you use to minimize and compress JavaScript libraries?

JavascriptCompressionMinimizeJscompress

Javascript Problem Overview

What do you use to minimize and compress JavaScript libraries?

Javascript Solutions

Solution 1 - Javascript

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 - Javascript

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

Solution 3 - Javascript

You have a herd of possibilities here:

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 - Javascript

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.

Solution 5 - Javascript

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>

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

Google's closure tools

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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).

Solution 11 - Javascript

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.

Solution 12 - Javascript

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

Solution 13 - Javascript

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

Solution 14 - Javascript

I use perl's http://search.cpan.org/~pmichaux/JavaScript-Minifier-1.05/lib/JavaScript/Minifier.pm>JavaScript::Minifier</a>;. It works pretty well and you can e.g. replace some phrases using perl.

Solution 15 - Javascript

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

Solution 16 - Javascript

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

Solution 17 - Javascript

There is a very good online compressor:

http://javascriptcompressor.com/

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

Hope it helps

Categories
Recommended Javascript Solutions
Recommended Compression Solutions
Recommended Minimize Solutions

Previous Solution:

Best practices for storing bank information in a database

PhpMysqlMcrypt

Next Solution:

How do I concatenate two binaries in Erlang?

ErlangBinaries

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionflybywireView Question on Stackoverflow
Solution 1 - JavascriptTim DownView Answer on Stackoverflow
Solution 2 - JavascriptjonstjohnView Answer on Stackoverflow
Solution 3 - JavascripthaylemView Answer on Stackoverflow
Solution 4 - JavascriptChristophView Answer on Stackoverflow
Solution 5 - JavascriptkosoantView Answer on Stackoverflow
Solution 6 - JavascriptDarin DimitrovView Answer on Stackoverflow
Solution 7 - JavascriptLouisView Answer on Stackoverflow
Solution 8 - JavascriptepascarelloView Answer on Stackoverflow
Solution 9 - JavascriptBillyView Answer on Stackoverflow
Solution 10 - JavascriptBrandon BooneView Answer on Stackoverflow
Solution 11 - JavascriptAlexView Answer on Stackoverflow
Solution 12 - Javascriptuser42092View Answer on Stackoverflow
Solution 13 - JavascriptGiorgiView Answer on Stackoverflow
Solution 14 - JavascriptFlo EdelmannView Answer on Stackoverflow
Solution 15 - JavascriptMike SamuelView Answer on Stackoverflow
Solution 16 - JavascriptAmareswarView Answer on Stackoverflow
Solution 17 - JavascriptgreuzeView Answer on Stackoverflow