Beware of script-dependencies with AMD loading

Asynchronous Module Definition is very useful to manage the loading of (larger) sets of libraries in the JavaScript runtime engine. Instead of explicit in own code take the responsibility for loading each needed javascript library one by one, it is more managable to delegate this to one of the AMD implementations. Require.js is by my knowledge most applied currently, but there are alternatives.

Our developers have implemented AMD loading in multiple of our custom build SharePoint Apps, utilizing Require.js. On inspecting (F12, Fiddler) the request/response traffic of our App-Model based intranet, we observed that sometimes a specific script file is requested twice, and the 2nd time from wrong url and not in minimized version. When I asked the App developer about it, he could not explain: from his code, he explicitly specified to load the minimized library. Also weird that the re-request does not occur always.

I decided to inspect runtime behavior plus the App code myself, and try to analyze (or rather, puzzle) what caused the behavior.

Code inspection

require(['../Scripts/AppHelpers'], function () {
    var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
    var hostProtocol = spHostUrl.split("//")[0];
    var hostRoot = spHostUrl.split("//")[1].split("/")[0];
    spHostUrl = hostProtocol + "//" + hostRoot;
    require([spHostUrl + '/Style%20Library/Scripts/jquery-1.11.1.min.js'], function () {
        require([spHostUrl + '/_layouts/15/MicrosoftAjax.js',
                 spHostUrl + '/_layouts/15/init.js',
                 spHostUrl + '/_layouts/15/sp.runtime.js',
                 spHostUrl + '/_layouts/15/sp.js',
                 spHostUrl + '/_layouts/15/sp.requestexecutor.js',
                 spHostUrl + '/_layouts/15/sp.core.js',
                 spHostUrl + '/_layouts/15/sp.init.js',
                 spHostUrl + '/_layouts/15/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes',
                 spHostUrl + '/_layouts/15/sp.ui.dialog.js',
                 "../Scripts/jquery.rotate.js",
                 "../Scripts/moment.min.js",
                 "../Scripts/moment-timezone.min.js",
                 "../Scripts/ListController.js",
                 "../Scripts/UserSettings.js",
                 "../Scripts/sp.communica.js",
                 "../Scripts/App.js"], 
             function () {
                     jQuery(document).ready(function () {
                         initialize(function () { });
             });
    });
});

Basically, the above code instructs require.js to first load the library ‘/Scripts/AppHelpers.js’, once that is loaded to load jQuery library, and once that is loaded, load a bunch of other libraries that are a.o. dependent on jQuery. And when all libraries loaded, invoke a custom initialization function (not displayed here, as not relevant for the issue).

Runtime analysis, via Fiddler and F12

In Fiddler, often however not always, the following sequence of requests is visible.

So first ‘/Scripts/moment.min.js’ is succesful requested, followed by unsuccesful (HTTP 404) request for ‘/Pages/moment.js’. The initiator of the http-request is setting the ‘src’ property of a <Script> element. Likely this is initiated from require.js handling.

I also inspected the runtime DOM. Herein it becomes clear why the browser requests the library a second time. And also it is indeed inserted in the DOM by require.js handling, as visible via the require.js properties.

Explanation: asynchronous loading + library-dependency

In the above displayed App HTML code, you see that in 3rd require.js load handling, a set of libraries are requested for load on the same level. Crucial here is that:

RequireJS uses Asynchronous Module Loading (AMD) for loading files. Each dependent module will start loading through asynchronous requests in the given order. Even though the file order is considered, we cannot guarantee that the first file is loaded before the second file due to the asynchronous nature

(source: Understanding RequireJS for Effective JavaScript Loading)

In the App code, moment.min.js and moment-timezone.min.js are specified required at same level:

       "../Scripts/moment.min.js",
       "../Scripts/moment-timezone.min.js",

But AMD thus does not guarantee that moment.min.js is loaded BEFORE moment-timezone.min.js; And as moment-timezone.min.js on its turns includes “define(["moment"],b)”, require.js resolves this to load the moment.js library in case not yet loaded. This explains why it does not always occur: sometimes moment.min.js is already loaded, sometimes not…

Solution

There are 2 alternative approaches to resolve the behavior. Essence of both is to make sure that moment.min.js is loaded before the dependent library moment-timezone.min.js:

1. Extend on the above code-pattern of explicit separating the load of libraries: still retrieve moment.min.js in the 3rd level, and move the load of moment-timezone.min.js to a 4th level:

   
   require(['../Scripts/AppHelpers'], function () {
       var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
       var hostProtocol = spHostUrl.split("//")[0];
       var hostRoot = spHostUrl.split("//")[1].split("/")[0];
       spHostUrl = hostProtocol + "//" + hostRoot;
       require([spHostUrl + '/Style%20Library/Scripts/jquery-1.11.1.min.js'], function () {
           require([spHostUrl + '/_layouts/15/MicrosoftAjax.js',
                    spHostUrl + '/_layouts/15/init.js',
                    spHostUrl + '/_layouts/15/sp.runtime.js',
                    spHostUrl + '/_layouts/15/sp.js',
                    spHostUrl + '/_layouts/15/sp.requestexecutor.js',
                    spHostUrl + '/_layouts/15/sp.core.js',
                    spHostUrl + '/_layouts/15/sp.init.js',
                    spHostUrl + '/_layouts/15/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes',
                    spHostUrl + '/_layouts/15/sp.ui.dialog.js',
                    "../Scripts/jquery.rotate.js",
                    "../Scripts/moment.min.js", function () {
               require(["../Scripts/moment-timezone.min.js",
                        "../Scripts/ListController.js",
                        "../Scripts/UserSettings.js",
                        "../Scripts/sp.communica.js",
                        "../Scripts/App.js"], function () {
                    jQuery(document).ready(function () {
                        initialize(function () { });
                });
       });
   });
   

2. Configure Require.js to be aware of the Module dependency

   
   requirejs.config({
     shim: {
       'moment-timezone.min': ['moment.min']
     }
   });