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

Question

我正在使用 Extjs5 开发一个大型客户端应用程序，其中包含每个模块的非常复杂的视图。我在 Extjs 中开发了应用程序，但它们都编译为一个应用程序.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开始您的煎茶 Cmd 构建。 如果这样做，Sencha Cmd 将首先构建可选包，并将它们添加到构建输出目录中的资源文件夹中。

sencha app build -uses production

重要的是，您不能从主应用程序中对可选包中的类进行任何引用。否则，生成将失败。

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

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