Time for action – creating a separate build

Unlike before, we don't need to move our application code into a separate file. Unless you kept a copy of the application from before the previous example, however, we'll need to fix up our HTML file a little bit for this example. This example assumes you are starting with the previous example:

Create a copy of flickr_combined.js and call it flickr_separate.js. As always, you may use a different name but make sure it is consistent! You might also want to make a copy of your HTML file and use it for the rest of this example.
Edit flickr_separate.js and remove all the goog.require statements from the beginning of the file.
Add a new <script> tag to load flickr_separate.js after the <script> tag that loads the combined build file:
```
<script src="flickr_separate.js"></script>
```

Now, we need to create our custom build of OpenLayers. First, we'll need a configuration file. Let's create a new file named flickr_separate.json in the OpenLayers build directory. Give it the following content:

{
  "exports": ["ol.Map",
  "ol.Map#*",
  "ol.View",
  "ol.animation.*",
  "ol.control.*",
  "ol.layer.Tile",
  "ol.proj.*",
  "ol.source.OSM",
  "ol.source.Vector",
  "ol.source.Vector#getFeatures",
  "ol.source.Vector#addFeature",
  "ol.source.Vector#removeFeature",
  "ol.layer.Vector",
  "ol.interaction.Select",
  "ol.interaction.Select#getFeatures",
  "ol.interaction.Select#on",
  "ol.Observable#on",
  "ol.Feature",
  "ol.Feature#get",
  "ol.Feature#set",
  "ol.geom.Point",
  "ol.style.Style",
  "ol.style.Fill",
  "ol.style.Stroke",
  "ol.style.Circle",
  "ol.style.Text",
  "ol.style.Icon"
  ],
  "src": ["src/**/*.js"],
  "compile": {
    "externs": [
    "externs/bingmaps.js",
    "externs/bootstrap.js",
    "externs/closure-compiler.js",
    "externs/example.js",
    "externs/geojson.js",
    "externs/jquery-1.7.js",
    "externs/oli.js",
    "externs/olx.js",
    "externs/proj4js.js",
    "externs/tilejson.js",
    "externs/topojson.js",
    "externs/vbarray.js"
    ],
    "define": [
    "goog.dom.ASSUME_STANDARDS_MODE=true",
    "goog.DEBUG=false"
    ],
    "jscomp_error": [
    "accessControls",
    "ambiguousFunctionDecl",
    "checkEventfulObjectDisposal",
    "checkRegExp",
    "checkStructDictInheritance",
    "checkTypes",
    "checkVars",
    "const",
    "constantProperty",
    "deprecated",
    "duplicateMessage",
    "es3",
    "externsValidation",
    "fileoverviewTags",
    "globalThis",
    "internetExplorerChecks",
    "invalidCasts",
    "misplacedTypeAnnotation",
    "missingGetCssName",
    "missingProperties",
    "missingProvide",
    "missingRequire",
    "missingReturn",
    "newCheckTypes",
    "nonStandardJsDocs",
    "suspiciousCode",
    "strictModuleDepCheck",
    "typeInvalidation",
    "undefinedNames",
    "undefinedVars",
    "unknownDefines",
    "uselessCode",
    "visibility"
    ],
    "extra_annotation_name": [
    "api", "observable"
    ],
    "jscomp_off": [
    "es5Strict"
    ],
    "compilation_level": "ADVANCED",
    "output_wrapper": "// OpenLayers 3. See http://ol3.js.org/\n(function(){%output%})();",
    "use_types_for_optimization": true,
    "manage_closure_dependencies": true
  }
}

Now, we can build our custom version of OpenLayers. Execute the following in a command prompt or terminal in the ol3 directory, as we did before:
```
node tasks/build.js build/flickr_separate.json build/flickr_separate.ol.js
```
Copy the resulting flickr_separate.ol.js back to your application folder next to flickr_separate.js.
Finally, change the script tag that loads flickr_combined.js to point to this new file:
```
<script src="flickr_separate.ol.js"></script>
```
Load your HTML page and everything should work just as it did before.

What just happened?

We just created a custom build of the OpenLayers library that contains only the code we need, and which exports only the things we actually use. The resulting library is a little bit larger—177.5 KB vs 156.5 KB—because the compiler is preserving the names of the objects, functions, and properties that we have exported. Let's review these steps.

First, we adapted our previous example and modified a copy of our application code to remove the goog.require statements. Those won't be needed for the compiler, and in fact, won't work with our custom build because the goog namespace is not exported.

Next, we created a new configuration file for the compiler. You probably noticed that it's nearly identical to the one from the previous example. In fact, there are two differences and they are very important. First, we removed our application source from the build by removing it from the src property. Second, we explicitly listed the names of objects and functions we want exported in the exports section.

Populating exports is really the trickiest part of creating a separate build. As with the combined build, a search of your code for ol. will identify all the main classes that you are referencing and these can be included directly in the exports array. However, exporting a class does not automatically export any of its properties or methods. We also need to know what methods we call on all objects that are exported. In some cases, we don't actually call any methods on the objects we created, but in other cases, we do. Finding these methods is a bit more time consuming as it requires manually reading the code.

When adding a method name to the exports list, we write it with the object name first, a # symbol, and then the method name, for instance see the following:

ol.Map#getSize

It is also possible to export all methods of an object by using * instead of a method name after the # symbol. While this is quick and easy, it will produce much larger builds than necessary in most cases.

Previous Chapter

Creating a separate build

Next Chapter

Summary

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – creating a separate build

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide