Javascript optimizations

[John Wiseman]

I've been working the past couple days at optimizing the javascript we load--switching to minified versions of libraries we use (I still need to switch to minified bootstrap and leaflet), and preparing our code to use the Google closure compiler.  I had noticed that the initial load time, especially on mobile devices or slow networks, was noticeably long.

I've finally closure-ified all our code (I think) to a basic level.  I experimented with compiling it at different levels of aggressiveness:

Compilation level      | Page load time | JS file size

------------------------------------------------------

unoptimized                      990 ms            N/A

WHITESPACE_ONLY                  538 ms       312789 B

SIMPLE_OPTIMIZATIONS             540 ms       247822 B

ADVANCED_OPTIMIZATIONS              N/A        35660 B

The javascript file size is for all the mavelous code + closure library, but not other third party libraries.  I didn't go to the trouble of measuring the size of all the files that get loaded in the unoptimized case.  Testing was done to localhost/loopback by finding the fastest load time from 3 trials, where load time was computed as window.performance.timing.loadEventEnd - window.performance.timing.responseEnd.

Even the WHITESPACE_ONLY compilation had a significant effect.  SIMPLE_OPTIMIZATIONS didn't affect load time much, but did decrease the file size by another 20%.  Closure's ADVANCED_OPTIMIZATIONS is very aggressive--it reduced file size by almost 90%--but I haven't gotten that code to run yet.  It renames all your symbols, and I haven't added the extra annotations that tell it not to rename the ones that we need to keep (e.g. App.start).

John

[John Wiseman]

Just to fill out some values:

Compilation level      | Page load time | JS file size (mavelous + closure)

------------------------------------------------------

unoptimized                      990 ms      1141983 B

WHITESPACE_ONLY                  538 ms       312789 B

SIMPLE_OPTIMIZATIONS             540 ms       247822 B

ADVANCED_OPTIMIZATIONS           232 ms*       35660 B*

* Doesn't actually run yet, so probably bogus.

[John Wiseman]

I've been making some progress in getting the mavelous code to be compliant with Google Closure ADVANCED_OPTIMIZATIONS; it now runs in offline mode correctly (though the PFD is corrupted).

It's been an interesting exercise.  Maybe this week I'll write up a guide to writing for Closure and my thoughts on the experience.

Compilation level      | Page load time | JS file size (mavelous + closure)

------------------------------------------------------

unoptimized                      990 ms     ~1141983 B

WHITESPACE_ONLY                       ?       314227 B

SIMPLE_OPTIMIZATIONS                  ?       252877 B

ADVANCED_OPTIMIZATIONS                ?        68434 B*

* Not everything works, but I doubt the code size will increase much more.