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

Question

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

Answer 1

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

最后，你应该有一个类似的文件夹结构：

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

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

{
    // [...]

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

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

    // [...]
}

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

sencha app build -uses production

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

由于您的可选包不会在页面启动时自动加载，您需要手动触发加载过程。我通常在我的 AppControllers 的路由过程中这样做。 举个例子：

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