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
          ],
...

score 0 · Accepted Answer · answered Oct 18 '16 at 14:03

0

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.

answered Oct 18 '16 at 14:03

T Kambi

1,383
2
8
15

So I tried the custom build for requirejs and I have all the folders for the arcgis js api but I don't know what to do next. If I wanted to use init.js how would I do so? Do you have any idea on how could go about in solving this? – mddev Oct 18 '16 at 17:05
For the init.js file I have done the following configuration as stated in this question http://gis.stackexchange.com/questions/133795/running-arcgis-api-for-javascript-locally, but how do I reference it in my requirejs application? – mddev Oct 18 '16 at 17:32
@mddev Can you share you application on github. so that I can take a look on what you have done so far. It can be simple application not the actual one. – T Kambi Oct 18 '16 at 21:04
I was able to add the arcgis js api javascript file (main.js) to my project locally. I was able to build the arcgis js api after going through some errors but I get an error from the local arcgis file that there is a CORS issue with the request http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json. I have added in the question the libraries I have included to build my arcgis js api. Am I forgetting a library? – mddev Oct 20 '16 at 17:48
To fix the CORS issue add the server to the list as `esri.config.defaults.io.corsEnabledServers.push('services.argisonline.com')` – T Kambi Oct 20 '16 at 18:06
I tried this esriConfig.request.corsEnabledServers.push('services.arcgisonline.com'); but still the map tiles do not show and the error remains. When I look through the main.js, I see that arcgis has specified all the urls like services.arcgisonline.com and others. I'm not sure why its not working, – mddev Oct 20 '16 at 19:36
you mean the CORS errors? Could be browser compatibility mode issue – T Kambi Oct 20 '16 at 20:25
This could help you http://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check-angularjs – T Kambi Oct 20 '16 at 20:34
I tried the command in the terminal /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security, and then ran my program but still the same error, the map tiles do not display. – mddev Oct 20 '16 at 22:42

RequireJS: onload making multiple http requests

1 Answers1