In one of my apps, I was including a few libraries, and the resulting code was getting rather large and hard to manage. I also couldn't get it to work when the files were separate, so I was working with them all in the same file. Having some experience with webapps, I knew exactly what to do: uglify my code.
def compile_js(ctx, in_js_files): # Concatenate all JS files into pebble-js-app.js in_js_nodes = ctx.path.ant_glob(in_js_files, excl='src/js/pebble-js-app.js') out_js_node = ctx.path.make_node('src/js/pebble-js-app.js') # Cleanup js and comments uglifyjs = 'uglifyjs' comp_opts = ','.join([ 'drop_console', 'pure_getters','warnings','cascade','join_vars', 'dead_code','sequences','properties','loops','unused', "pure_funcs=['DMath.sin','DMath.cos']", ]) defines = "" options = '--screw-ie8 -c %s --lint -m toplevel %s' % (comp_opts, defines) inputs = ' '.join(node.relpath() for node in in_js_nodes) ret = ctx.exec_command('%s %s %s > %s' % (uglifyjs, options, inputs, out_js_node.relpath())) if ret != 0: ctx.fatal('uglifyjs failed') return out_js_node
To use it, replace the last two lines in your normal wscript file:
js_node = compile_js(ctx, 'src/js/**/*.js') ctx.pbl_bundle(elf='pebble-app.elf', js=js_node)
For my particular case, I had a library that had lots of comments, so my final js file went from 19K to less than 8K, a saving of almost 60%! While this isn't a major performance change, I admit, it is one of many steps to giving your users a great experience.
An Exaltation of the User Experience
Extra Options with UglifyJS2
In my code block above, you may have noticed a few different things, like the uglifyjs variable and the empty defines variable. I don't actually use that block exactly, I have some customizations.
I actually don't have uglifyjs2 installed to my system, I have it checked out along with its dependencies into a nodejs-src folder. That's amdefine, async, minimist, node-optimist, node-wordwrap, source-map, and UglifyJS2, each with a symlink from a nodejs folder to the various source files/folders:
amdefine.js -> ../nodejs-src/amdefine/amdefine.js async.js -> ../nodejs-src/async/lib/async.js minimist.js -> ../nodejs-src/minimist/index.js optimist.js -> ../nodejs-src/node-optimist/index.js source-map -> ../nodejs-src/source-map/lib/source-map source-map.js -> ../nodejs-src/source-map/lib/source-map.js wordwrap.js -> ../nodejs-src/node-wordwrap/index.js
Then I have uglifyjs set to:
I copied this structure from a friend in college (initially with Python and using PYTHONPATH), and I think it works pretty well.
There are quite a few options possible, I only set a few. For creating a pbw to upload to the app store, I stick with the ones I wrote above, but for development sometimes I add -b to beautify the output, which just adds whitespace by default. I can also normally don't remove console logging, but that's a compressor options.
comp_opts is my current preference for compressor options, but they're not set in stone. You can add/remove anything from that list according to the readme of UglifyJS2.
Here's my actual defines variable:
defines = "--define SET_PEBBLE_TOKEN='%s'" % ( ctx.path.find_node('setpebble.token').read().strip())
With UglifyJS2 in your build process, you get plenty of benefits, including a slightly better user experence to give you an edge over the next guy writing a competing app. Also, just in case it seems otherwise, I have no affiliation with UgilfyJS2. I just found it when I was doing research for a previous job and liked how well it did its job.