extreme javascript minification
DESCRIPTION
Minifying javascript is a standard industry practice, but for competitions such as JS13k you have to go pretty far. This presentation covers some advanced techniques, what works, and what doesn't, to get your code as crunched as possible.TRANSCRIPT
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