Я занимаюсь разработкой большого клиентского приложения с очень сложными представлениями для каждого модуля с использованием Extjs5. Я разрабатывал приложения в Extjs, но все они компилируются в один файл app.js. Таким образом, исходя из сложности представлений во всех макетах приложений, я оцениваю размер приложения в пределах от 20 до 25 МБ даже после компиляции. Я думал разделить модули на отдельные приложения и создать главное приложение с вкладками или чем-то еще, что будет запускать загрузку отдельных приложений в iFrame в главном приложении. Но я сомневаюсь, что если поведение iframe будет изменено в разных браузерах или объявлено устаревшим в будущих версиях браузера, это станет еще одной большой проблемой. Так есть ли способ в sencha cmd, который компилирует приложение в отдельные файлы на основе модулей и загружает их по запросу из коробки? Если нет, то какое решение я должен использовать.
Динамическая загрузка модульного приложения Extjs
Ответы (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"
]
// [...]
}
Далее вам нужно запустить сборку 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
