[OpenLayers-Dev] Loading performance improvements for v3

[Gregers Gram Rygg]

Hi,

OpenLayers have grown to a quite large library (877kB minified), and
my guess is that most sites only use a small portion of the classes.
Of course you could hand pick the classes you need to build a smaller
library, but you have to modify the build script to exclude everything
except what you explicitly define in your config. This process is
quite difficult, and you would have to update the config if you want
to use new classes. The changes might change the API slightly, so now
is a good time to investigate. So here are a few suggestions to make
it easier to load code on demand, create custom packages and improve
minifying. All users will benefit from these improvements, but they
are probably most noticeable on mobile devices and computers connected
to internet through mobile connections.

Unfortunately I'm not working with OL right now (back full time Sept.
1st), but I hope to start some interesting discussions, and I'll start
playing around in a sandbox in Sept.

=== Load on demand ===
First configure a minimal OpenLayers package with only what's needed
to show a map with no controllers. Then load other classes when
they're needed. The classes in OpenLayers already have @requires
annotations for it's dependencies, so hopefully it's not such a big
job to rewrite. It's not very difficult to write code that loads code
async on demand, but there are also well tested libraries, like
RequireJS (BSD, MIT, and GPL).

This method won't complicate anything for developers that don't care,
since they could include bundles with what they need like before. But
it would be easy to include a minimal version, and load the rest on
demand. You could even see what classes normally loads on demand and
create bundles of those to load async.

It would also be possible to improve it further without changing the
API. With a short timer we could buffer classes that are required into
one request, and bundle the files server side. Yahoo has this service
for YUI: http://yuiblog.com/blog/2008/10/17/loading-yui/, and there
are open source projects that can do this for you:
http://code.google.com/p/minify/

Google Maps v3 also does something similar to give the user a lower
perceived latency:
http://www.stevesouders.com/blog/2010/07/07/velocity-google-maps-api-performance/


=== JavaScript minifying ===
Google released their javascript compiler last autumn. It does a lot
to reduce the size of the scripts, but to use the advanced
optimizations the code has to be prepared for it. I'm not sure if
Google Closure is the right way to go, but I think it's worth a
discussion. Does anyone have experience with Google Closure or other
compilers?
http://code.google.com/closure/compiler/docs/api-tutorial3.html#enable

- Google Closure removes unused methods. This can cause a lot of
problems for unaware developers, but it could also reduce the size
significantly if used right. I think you have to build your own code
in the same process of building OpenLayers for this to work, and the
resulting script might be difficult to split and load parts on demand.
So maybe not worth it?

- When compiling, add an extra file to the beginning and end so that
OpenLayers is in a private scope. This allows the compiler to
obfuscate all methods and properties to shorter names. Then expose
references to the privates in the script at the end. Sounds easy in
theory, but might be difficult to find an easily maintained and
generic solution. OpenLayers["Layer"] = OpenLayers.Layer would work,
but I guess we don't want to hard-code each method and property. Maybe
use the NaturalDocs annotations in combination with a perl script?
Suggestions?


Regards,
Gregers