Dynamically Load Extjs Modular application - extjs

Question

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.

Answer 1

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
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"
]
// [...]
}
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.
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'});
}
});
More information on this topic:
http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading