动态加载Extjs模块化应用程序 [英] Dynamically Load Extjs Modular application

问题描述

我正在使用Extjs5开发一个大型客户端应用程序，该应用程序在每个模块上都有非常复杂的视图.我已经在Extjs中开发了应用程序，但是它们都可以编译为一个app.js文件.因此，基于所有应用程序模型中视图的复杂性，我估计即使编译后，应用程序的大小也将约为20MB至25MB. 我当时正在考虑将模块拆分为单独的应用程序，并创建带有标签或其他内容的主应用程序，这将触发将单个应用程序加载到主应用程序中的iFrame中.但是我怀疑iframe的行为是否会在不同的浏览器中更改或在将来的任何浏览器版本中弃用，这将是另一个大问题. 那么sencha cmd中有什么方法可以根据模块将应用程序编译到单独的文件中，并根据需要立即将其加载? 如果不是，那么应该采取什么明智的解决方案.

I am in to developing a large client side app with very complex views on each modules using Extjs5. I have developed apps in Extjs but they all compile to a single app.js file. So based on the complexity of the views in all the app mockups I am estimating the size of the app will be around 20MB to 25MB even after compiled. I was thinking to split the modules as separate applications and create a master app with tabs or something, which triggered will be loading individual apps in a iFrame within the master app. But I doubt if the iframe behaviors are altered in different browsers or deprecated in any future browser releases, that will be another big problem. So is there any way in sencha cmd, which compiles app in separate files based on modules and load them on demand out of the box ? If not what is the advisable solution I should be going ahead with.

推荐答案

从Sencha Cmd 6.5开始，您可以将代码拆分为多个文件.为此，如果尚未完成，则必须将代码拆分为exjts包:

Starting with Sencha Cmd 6.5 you can split your code into multiple files. To achieve this, you have to split your code into exjts packages if it’s not already done:

最后，您应该具有与此类似的文件夹结构:

In the end, you should have a similar folder structure to this:

workspaceDir
|
+->appA
+->appB
+->packages
 |
 +-> local
  |
  +->CoreComponents
  +->ProcurementModule
  +->ForumModule
  +->BOMModule
  +->ReportModule

在您的app.json文件中，您可以将软件包从requires添加/移动到uses.最后，您必须将新的package-loader添加到app.json中的requires数组中. 您最终会得到这样的东西:

In your app.json file you could add/move your packages from requires to uses. As a last step you have to add the new package-loader to the requires array in app.json. You end up with something like that:

{
    // [...]

    "uses": [
        "ProcurementModule",
        "ForumModule",
        "BOMModule",
        "ReportModule"
    ],

    "requires": [
        "CoreComponents",
        "package-loader"
    ]

    // [...]
}

接下来，您需要使用附加标志-uses开始Sencha Cmd构建. 如果这样做，Sencha Cmd将首先构建您的可选软件包，并将它们添加到构建输出目录中的resource文件夹中.

Next you need to start your Sencha Cmd build with the additional flag -uses. If you do this, Sencha Cmd will build your optional packages first and add them to the resource folder in your build output directory.

sencha app build -uses production

重要的是，您在主应用程序中没有对可选包中的类的任何引用.否则，您的构建将失败.

It is important, that you don't have any references to classes in optional packages from your main application. Otherwise your build will fail.

由于可选的软件包在页面启动时不会自动加载，因此需要手动触发加载过程.我通常在AppControllers的路由过程中执行此操作. 这里是一个例子:

Since your optional packages are not loaded automatically on page startup you need to trigger the loading process manually. I do it usually within the routing process of my AppControllers. Here an example:

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
        'Ext.Package'
    ],

    routes: {
        'forum': {
            before: 'loadForum',
            action: 'showView'
        }
    },

    loadForum(action) {
        if (Ext.Package.isLoaded('ForumModule')) {
            action.resume();
        } else {
            //Loading mask code here [...]
            Ext.defer(() => {  // it needs some time to show up the loading mask
                Ext.Package.load('ForumModule').then(() => {
                    //Remove loading mask code here [...]
                    action.resume();  //proceed router process; all package files loaded
                });
            }, 500);
        }
    },

    showView() {
        this.getView().add({xclass: 'ForumModule.view.MainView'});
    }
});

有关此主题的更多信息: http://docs.sencha.com/cmd/guides/whats_new_cmd65. html#whats_new_cmd65 _-_ dynamic_package_loading

More information on this topic: http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading

这篇关于动态加载Extjs模块化应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！