RequireJS: onload making multiple http requests

Question

My requireJS script is make around 500 http requests which hangs my program at the beginning. I am using gulp and gulp-requirejs (optimizer) but I'm not sure how to reduce the number of http requests most of them are coming from Esri (I am using ArcGIS JS 4.0 API). Does anybody have any idea on how I can limit this?

I have look at this question but I'm not sure how to actually achieve this in requirejs: https://gis.stackexchange.com/questions/33182/does-the-arcgis-javascript-api-let-me-build-package-my-application-using-dojo

Config code:

requirejs.config({
    paths: {
        "jquery": 'https://code.jquery.com/jquery-3.1.0.min',
        'moment/moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment',
        "esri": 'http://js.arcgis.com/4.0/esri',
        "dojo": 'http://js.arcgis.com/4.0/dojo',
        "dojox": 'http://js.arcgis.com/4.0/dojox',
        "dijit": 'http://js.arcgis.com/4.0/dijit'
    },
    shim: {
        ...
        "map": {
            deps: [ 'jquery', 'esri', 'dojo']
        },

    }
});

Using ArcGIS JS 4.0 API in one of my modules:

define('map',["jquery","esri/Color",
    "esri/geometry/Point",
    "esri/geometry/Polygon",
    "esri/symbols/SimpleFillSymbol",..],function(...){

});

UPDATE: So after building the arcgis js api (using grunt), I included the main.js (found dist folder) to my project. But the local copy of the API gives me the error:

XMLHttpRequest cannot load http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4000' is therefore not allowed access. The response had HTTP status code 501.

I am not making a request instead the arcgis js library is making this call. Am I forgetting a library that should have been included grunt config when building my arcgis js API?

the grunt file config for arcgis js API:

...
include: [
            'requirejs/require',
            'esri/layers/FeatureLayer',
            'esri/layers/TileLayer',
            'esri/layers/support/LabelClass',
            'esri/layers/graphics/controllers/SnapshotController',
            'esri/portal/support/layersCreator',
            'esri/views/3d/layers/TiledLayerView3D',
            'esri/views/layers/GraphicsLayerView',
            'esri/views/3d/webgl-engine/lib/FloatingBoxLocalOriginFactory',
            'esri/views/3d/webgl-engine/lib/Layer',
            'esri/views/3d/webgl-engine/lib/MaterialCollection',
            'esri/views/3d/webgl-engine/lib/Octree',
            'esri/views/3d/webgl-engine/lib/TextTextureAtlas',
            'esri/views/MapView',
            'esri/views/2d/layers/GraphicsLayerView2D'
          ],
          exclude: [
            'dojo/domReady',
            'dojo/has',
            'dgrid',
            'dojo/i18n', // some methods not available with RequireJS
          ],
...

T Kambi T Kambi · Accepted Answer · 2016-10-18T14:03:19

The default file(init.js) in Esri API, contains the require implementation and also it has most of the basic modules caches. This is done to reduce the initial loading time. But, since you are not using the esri require (the init.js file to load), all the cached modules are not available. and hence, each modules are being downloaded through http requests.

You try to build a custom build of ESRI script using Bower. The details on how to do it available of their website.

I know its not exactly answering your question. but, hope it would help.

RequireJS: onload making multiple http requests

1 Answers