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添加到requires中的app.json数组中。你最终会得到类似的东西：

{
    // [...]

    "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

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

1 个答案: