Question about Bower

[AyakoSUZUKI]

I am following documentation 'Using Bower for Custom Builds of the ArcGIS API for JavaScript' to understand how to create custom build.

In the sample Esri provided, 4 dependencies are included in the include parameter as dependencies of esri/map in build.profile.js.

layers: {
    'dojo/dojo': {
        boot: true,
        customBase: true,
        include: [
            // include the app, set accordingly for your application
            'app/main',
            // dependencies of esri/map that will be requested if not included
            'dojox/gfx/path',
            'dojox/gfx/svg',
            'dojox/gfx/shape',
            'esri/dijit/Attribution'
        ],
        includeLocales: ['en-us']
    }
},

esri/map is a dependency of app/main.

So, I do not think dependencies of esri/map is necessary to be included in the parameter when app/main is included.

However, when I deleted dependencies of esri/map and created custom build, these 4 dependencies are dynamically loaded.

Does anyone know why the dependencies of esri/map is required to be included in the parameter if I want to create one single js file?

[ReneRubalcava]

There are various modules in the ArcGIS JS API that are dynamically loaded for various reasons. In this case, the dojox modules are dynamically loaded because the files needed can very based on browser capabilities. When using WebMaps, the API will load most common layer types, but others are dynamically loaded as needed, since the types of layers in a WebMap can vary quite a bit.

In the guide we let you know that for this sample, these are the dynamically loaded files you can include in your build. Best practice when your application grows is to do test builds to see what files are dynamically loaded so you can add them to be included in your build script.

Thanks!

[AyakoSUZUKI]

Hi Rene,

Thank you for your answer.

My understanding of dojo build system is that modules which is included in include parameter and all their dependencies are packed in one file after build compete.

So, when 'app/main' is included in include parameter, 'esri/map', 'esri/dijit/Measurement' and all their dependencies will be together. What I do not understand is that why 4 modules are separately listed.

I am sorry, but I cannot completely understand your answer.

You mentioned dojox.

Is dojo build system not able to include dojox when it is used as dependencies of a module?

[ReneRubalcava]

Some files are lazy loaded.

It may look something like this when you load a webmap.

define(["require", "esri/layers/FeatureLayer", "esri/layers/ArcGISTileMapServiceLayer"], function(require, FL, TL) {
 // code to load the webmap and determine what layers are needed
 if (needImageLayer) {
   require([dictionary.ImagerLayer], function() {
      // stuff
    });
  }
});

That inner require is lazy loading modules that you may or may not need. The build system will not build the files in that inner require statement. There are cases of this throughout the API. This is a case where you need to add the files to the include list.

Another case that happens for graphics looks something like this.

define(["has!svg?./gfx/svg:./gfx/vml"], function(graphixType) {});

This is a loader plugin that will check at runtime if your browser supports SVG or not, if it does, it will load the SVG module, if it does not, it will load an older module to support graphics. This particular case isn't really valid today, but there are plenty of other uses of runtime checks for certain support to load certain files.

Again, you will need to manually add these files to the include list to get a single file build.