Lazy loading boilerplate modules

Question

in boilerplatejs it looks like modules are pre-loaded

(Refer to code below)

return [
            require('./baseModule/module'),
            require('./sampleModule2/module'),
            require('./customerModule/module'),
            require('./orderSearchModule/module'),
            require('./orderListModule/module'),
            require('./mainMenuModule/module')
        ];

what is the impact on this when it comes to large scale web applications (module heavy web applications) . Is there any way to lazy load modules in boilerplatejs?

Answer 1

Java script has no reflection type of mechanism to load things. Any module that needs to be loaded has to be registered somewhere. This is why modules (sub contexts) are loaded as below:

appContext.loadChildContexts(moduleContexts);

(in src/application.js)

But code you have above is about requirejs AMD modules. This is basically the import of different JS scripts (each representing code for modules). With requireJS AMD, scripts (your source code) are not lazy loaded, but pre loaded. This make sense since your application source code should be available in the browser for execution. On the other hand, when you do JS optimization, we anyway create a single script containing all your source code. Then there is no meaning of having separate script files, or lazy loading of the source code.

But lazy loading should be applied to the behaviors (not to load code). This is why the UI components (ViewTemplate) are only created at the 'activate()' method. These are created only when users demands for it. That is a lazy loading of behavior, so that application rendering time is less.

    this.activate = function(parent, params) {
        // if panel is not created, lets create it and initiate bindings
        if (!panel) {
            panel = new Boiler.ViewTemplate(parent, template, nls);
            ...
        }
        vm.initialize(params.name);
        panel.show();
    }