![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!](https://image.slidesharecdn.com/minification-140918044344-phpapp02/75/extreme-javascript-minification-8-2048.jpg?cb=1667974345)
Extreme Javascript Minification
•1 like•3,233 views
Report
Share
Download to read offline
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.
More Related Content
What's hot
What's hot(20)
Similar to Extreme Javascript Minification
Similar to Extreme Javascript Minification(20)
Recently uploaded
Recently uploaded(20)
Extreme Javascript Minification
- 1. Extreme Javascript Minification Compression experiments for JS13k by David Goemans BoosterMedia 2014
- 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. • 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. • With advanced compression, performs better than Uglify • Minimal code changes required to make it compress well • Compression is pretty good, but... YUI
- 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. 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. • 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. 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. 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