Download - 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
@dgoemans
About me
Links:
JS13k Project code: https://github.com/dgoemans/shipwrecked
Extra info on zip compression: https://gist.github.com/subzey/b18c482922cd17693d65
