If you’re using JavaScript to create demoscene productions then file size is everything. JsExe is a tool that will crunch your JavaScript code as tightly as it can, saving you precious bytes in the process. It uses a variety of compression tricks as author Charles Boccato (cb of demo group adinpsz) explains:
- Takes the original JavaScript file as the input
- If it helps, the JS file is optimized using an improved version of Google Closure Compiler (with no line break, better float formatting, etc).
- File byte order is reversed or not (depending on whether it improves final compression rate or not).
- It embeds the resulting file in a PNG image, choosing the best PNG format (RGB or gray).
- Then it uses the most efficient PNG optimizer tool (PNGOUT or another one).
- The output PNG is stripped of CRC and IEND block.
- Finally a loader is appended to the output file. In the loader, V is the name of canvas element and C is the name of its 2D context. By reusing this variables in your JS code, you have an access to an existing canvas element and its 2D context and do not have to create new ones (it saves a few bytes).
Compressing JavaScript into PNGs isn’t new of course. Jacob Seidelin of Nihilogic blogged about the technique back in 2008, and Alex Le refined it a few years later. But it’s still great to see an app that bundles it together for you – and anything that helps to promote the browser based demo scene is a great thing in my book.
JS-only solution, can pack multiple files:
https://github.com/MadeInHaus/PNGDrive
Just a couple of clarifications.
With the older PNG compression technique devised by Jacob Seidelen and Alex Le, you need to have one PNG image + an HTML page with some JavaScript to load the image, extract and evaluate its content.
With PNG bootstrapping, the foundation of JSexe, you end up with a single file: a PNG image that is padded with the bootstrapping code. When loading this file ( as the main resource ) web browsers sniff the content type and give priority to the HTML+CSS+JS within. It’s
PNG bootstrapping was discovered by Cody ‘Daeken’ Brocious ( initially it only worked in Chrome and Firefox ) and improved by Matthew ‘Gasman’ Westcott ( who added the global eval and made a tool similar to JSexe in Ruby ), Charles ‘CB’ Boccato ( JSexe ) and myself: Mathieu ‘p01′ Henri ( much shorter bootstrapping code and cross compatibility with Chrome, Firefox, Opera and Safari ).
If you’re interesting in the details and some more , check:
* http://daeken.com/superpacking-js-demos
* http://pouet.net/topic.php?which=8770
* https://vimeo.com/43335760
The author of JsExe will make a talk about the tool at DemoJS 2012 : http://demojs.org/schedule.html
Should we still consider using this project?
If it’s for demomaking yes of course.