filesize

How to deal with filesize

Haxe's javascript output does not compress or minify javascript output by default, this is an additional step you should consider when deploying production code. This tip will outline common techniques available for reducing filesize. There are three general procedures, some may not work depending on your development setup:

  • minification
  • compression
  • dead-code elimination

Minifying


Minification involves reducing white-space, mangling local variable names, and generally reducing the footprint of a javascript file. There are many javascript minifiers, with different characteristics:
  • YUI compressor: A mature minifier achieving good results, without changing the public API.
  • Google Closure compiler: Much more than just a minifier, very aggressive algorithm, some versions of Haxe may not be compatible with the compiler.
  • JSMin: A native Haxe port of JsMin - has the advantage of being pure Haxe code. Easiest to install (haxelib install jsmin) and run (haxelib run jsmin input.js output.js).

It's recommended to get accustomed to one of these and add the appropriate command to your build.hxml file responsible for production deployments.

For example:

-main Main
-lib jeash
--remap flash:jeash
-js main.js
-cmd haxelib run jsmin main.js main_min.js

Compression

Transparent compression is available on all client browsers supported by jeash, so it makes sense to use it. Unfortunately, you will need to configure your HTTP server to compress files while they are transmitted.

  • Apache

You will need to amend the following to your httpd.conf:

LoadModule deflate_module modules/mod_deflate.so  
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/javascript
  SetOutputFilter DEFLATE
</IfModule>

Whereby the path to mod_deflate.so is specific to your server filesystem layout. You will need to restart apache to adobt the new configuration, using your distribution provided init script (in most cases /etc/init.d/apache*) Most linux distributions (ubuntu, gentoo, etc) have a more sophisticated mechanism for their apache configuration, it's a good idea to become more familiar with this aspect from a distribution perspective.

If all is lost, it's best to check the official documentation: Apache deflate.

  • Nginx

Nginx is a popular server, deflate is normally active by default. If not, the following configuration should be present in your nginx config, normally nginx.conf in /etc/nginx:

  gzip on;
  gzip_min_length 1100;
  gzip_buffers 4 8k;
  gzip_types text/plain;

As with apache, you will need to restart nginx to adobt the new configuration.

  • Test!

You can check if compression works using wget:

wget "http://site.com/main.js"

The progress meter will tell you the final filesize.

  • Other

Please contribute other server configurations if you find them. Thanks!

Dead-Code Elimination

Recent versions of Haxe can detect when parts of the code can be eliminated (thanks to patches from Franco Ponticelli), using the command-line switch dead-code-elimination. This will also reduce the javascript filesize dramatically:

-main Main
-lib jeash
--remap flash:jeash
-js main.js
--dead-code-elimination

Warning: some other libraries are not compatible with this command-line option, if you get strange compiler errors, then it's best to turn this off. Jeash itself is known to work with this option though.

Conclusion

It's possible to achieve great gains, most jeash projects should land under 50kB, if all these steps are successful.

version #10697, modified 2011-06-20 21:31:12 by grumpytoad