extreme javascript minification

Extreme Javascript Minification

Compression experiments for JS13k

by David Goemans

BoosterMedia 2014

• For JS13k, your delivered package needs to be 13kb or less

• It can be compressed but as a standard zip format

• This gives you about 90kb for actual code

• Many techniques available:• Uglify2JS• YUI• Closure• JS Crush & Packer

• Zip Formats are restrictive

• Renaming tricks ( Globals )

What?

• Very good for day-to-day compress

• Node/Grunt module makes for super easy integration

• Works out of the box, virtually never requires code changes

• Compresses very well, but not well enough

Uglify2JS

• With advanced compression, performs better than Uglify

• Minimal code changes required to make it compress well

• Compression is pretty good, but...

YUI

• Great compression with advanced compilation

• Requires code changes, especially related to global variables

• Some APIs not recognized by the compiler, such as PointerLock

• Best compression for zipping

Closure

~75kb code ~26kb code

• These are amazing pieces of technology.

• Crazy compression for javascript, much smaller .js files than the other options

• For best results, first run through Closure or Uglify with simple optimizations

• Since they're already so well compressed, they don't zip very well

• Not that useful for JS13k, and normal use, but great for JS1k!

JSCrush & Packer

• Zip has a few algorithms you can use, but only deflate is widely supported

• Deflate is based on Huffman trees, which works by detecting patterns

• Lots of the same text close together compresses well

• This is why JSCrush/Packer doesn't zip very well!

• Each file generates some overhead• • Less files with shorter names is best

Zip

• Remember, reserved words can't be minified.

• Re-define common long reserved names and attach to a global object

Instead of: gl.TEXTURE_MIN_FILTER

Global.js:var $;$.minFilterVar = 'TEXTURE_MIN_FILTER';

everywhere else:gl[$.minFilterVar]

• Seems longer at first, but compresses really well!

Extra tricks

David GoemansLead developer @ BoosterMedia Game Studio

david.goemans@boostermedia.com

@dgoemans

About me

Links:

JS13k Project code: https://github.com/dgoemans/shipwrecked

Extra info on zip compression: https://gist.github.com/subzey/b18c482922cd17693d65