Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
• Very good for day-to-day compress 
Uglify2JS 
• Node/Grunt module makes for super easy integration 
• Works out of the b...
• With advanced compression, performs better than Uglify 
• Minimal code changes required to make it compress well 
• Comp...
• Great compression with advanced compilation 
• Requires code changes, especially related to global variables 
• Some API...
JSCrush & Packer 
• These are amazing pieces of technology. 
• Crazy compression for javascript, much smaller .js files th...
• Zip has a few algorithms you can use, but only deflate is widely supported 
• Deflate is based on Huffman trees, which w...
Extra tricks 
• Remember, reserved words can't be minified. 
• Re-define common long reserved names and attach to a global...
David Goemans 
Lead developer @ BoosterMedia Game Studio 
david.goemans@boostermedia.com 
@dgoemans 
About me 
Links: 
JS1...
Upcoming SlideShare
Loading in …5
×

Extreme Javascript Minification

2,170 views

Published on

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.

Published in: Technology
  • Be the first to comment

Extreme Javascript Minification

  1. 1. Extreme Javascript Minification Compression experiments for JS13k by David Goemans BoosterMedia 2014
  2. 2. • 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?
  3. 3. • Very good for day-to-day compress Uglify2JS • 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
  4. 4. • With advanced compression, performs better than Uglify • Minimal code changes required to make it compress well • Compression is pretty good, but... YUI
  5. 5. • 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
  6. 6. JSCrush & Packer • 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!
  7. 7. • 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
  8. 8. Extra tricks • 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!
  9. 9. David Goemans Lead 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

×