Slimming down OpenLayers
The recent release of the 2.9.x OpenLayers javascript library has seen it grow still fatter 857kb for the OpenLayers.js if you use it out of the box from the OpenLayers download.
If you live in a bandwidth impoverished country like South Africa, those 857kb equate to a lengthy wait time while a page with a map on it first loads.
I've never really delved much into the inner workings of OpenLayers before - I'm just a contented user - but with this new release I thought I would take a little poke around to see if it was possible to trim some of the fat off the library.
The fine folks at OpenLayers already minify the javascript (which removes redundant white space, compacts var names etc), so my best option was to look at removing parts of the code base I don't really use. OL supports many data formats that I'm not using e.g. WFS, bing maps, etc.
It turns out its pretty easy to create your own custom build. What I did was unpack the OL 2.9.1 tarball and then do:
cd build
To enter the build directory. Then I created a file called tim.cfg that looks like this:
# This file includes the OpenLayers code to create a build for everything that # does not require vector support. build.py uses this profile if no other one # is specified. [first] OpenLayers/SingleFile.js OpenLayers.js OpenLayers/BaseTypes.js OpenLayers/BaseTypes/Class.js OpenLayers/Console.js OpenLayers/Util.js OpenLayers/Events.js OpenLayers/Handler.js Rico/Corner.js [last] [include] OpenLayers/Format/WKT.js OpenLayers/Format/KML.js OpenLayers/Format/WFS.js OpenLayers/Format.js OpenLayers/Handler/Point.js OpenLayers/Geometry/Point.js OpenLayers/Geometry/Surface.js OpenLayers/Geometry.js OpenLayers/Layer/Vector.js OpenLayers/Control/Attribution.js OpenLayers/Control/Button.js OpenLayers/Handler/Box.js OpenLayers/Handler/Click.js OpenLayers/Handler/Drag.js OpenLayers/Handler/Feature.js OpenLayers/Handler/Hover.js OpenLayers/Handler/Keyboard.js OpenLayers/Handler/MouseWheel.js OpenLayers/Handler/Path.js OpenLayers/Handler/Point.js OpenLayers/Handler/Polygon.js OpenLayers/Handler/RegularPolygon.js OpenLayers/Control/ZoomBox.js OpenLayers/Control/ZoomToMaxExtent.js OpenLayers/Control/DragPan.js OpenLayers/Control/Measure.js OpenLayers/Control/MouseDefaults.js OpenLayers/Control/MousePosition.js OpenLayers/Control/KeyboardDefaults.js OpenLayers/Control/PanZoom.js OpenLayers/Control/ArgParser.js OpenLayers/Control/Permalink.js OpenLayers/Control/Scale.js OpenLayers/Feature/Vector.js OpenLayers/Renderer OpenLayers/Renderer/Elements.js OpenLayers/Renderer/SVG.js OpenLayers/Renderer/VML.js OpenLayers/Renderer.js OpenLayers/Map.js OpenLayers/Layer/WMS.js [exclude]
Once that is created, you can build the library then copy it into your project to test:
python build.py tim.cfg cp OpenLayers.js [your project dir]
Then reload your web page with a map on it. You can incrementally remove features while testing your page still works properly until you reach the happy medium of size vs functionality. In my case my custom OpenLayers.js came out to a much smaller size - 342kb - and given time I could probably strip it down further.
Thanks to the OpenLayers devs for a great library!
Update After posting this I realised that I hadnt removed WFS and KML - after removing those two lines in the above file, the library now weighs in at 290kb!
