动态加载Extjs模块化应用程序

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

从 Sencha Cmd 6.5 开始，您可以将代码拆分为多个文件。要实现此目的，您必须将代码拆分为 exjts 包（如果尚未完成）：

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

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

In your app.json您可以从中添加/移动包的文件requires to uses。作为最后一步，您必须添加新的package-loader to the requires数组中app.json。 你最终会得到这样的结果：

{
    // [...]

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

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

    // [...]
}

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

sencha app build -uses production

重要的是，您不要从主应用程序中引用可选包中的类。否则你的构建将会失败。

由于您的可选包不会在页面启动时自动加载，因此您需要手动触发加载过程。我通常在 AppController 的路由过程中执行此操作。 这里有一个例子：

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 http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading