延迟加载样板模块 [英] Lazy loading boilerplate modules

问题描述

在boilerplatejs中，模块似乎已预装了

in boilerplatejs it looks like modules are pre-loaded

(请参阅下面的代码)

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

当涉及到大型Web应用程序(模块密集型Web应用程序)时，对此有什么影响.有什么办法可以在boilerplatejs中延迟加载模块?

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?

推荐答案

Java脚本没有反映类型的机制来加载内容.任何需要加载的模块都必须在某个地方注册.这就是为什么按以下方式加载模块(子上下文)的原因:

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);

(在src/application.js中)

(in src/application.js)

但是您上面的代码是关于requirejs AMD模块的.基本上，这是导入不同的JS脚本(每个JS脚本代表模块的代码).使用requireJS AMD，脚本(您的源代码)不会被延迟加载，而是被预先加载.这是有道理的，因为您的应用程序源代码应该在浏览器中可以执行.另一方面，当您进行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.

但是应将延迟加载应用于行为(而不是加载代码).这就是为什么仅在'activate()'方法中创建UI组件(ViewTemplate)的原因.这些仅在用户需要时创建.这是行为的延迟加载，因此应用程序渲染时间更少.

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();
    }

这篇关于延迟加载样板模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！