Saya sedang mengembangkan aplikasi sisi klien besar dengan tampilan yang sangat kompleks pada setiap modul menggunakan Extjs5. Saya telah mengembangkan aplikasi di Extjs tetapi semuanya dikompilasi menjadi satu file app.js. Jadi berdasarkan kompleksitas tampilan di semua maket aplikasi, saya memperkirakan ukuran aplikasi akan berkisar 20MB hingga 25MB bahkan setelah dikompilasi. Saya berpikir untuk membagi modul sebagai aplikasi terpisah dan membuat aplikasi master dengan tab atau sesuatu, yang dipicu akan memuat aplikasi individual di iFrame di dalam aplikasi master. Namun saya ragu jika perilaku iframe diubah di browser lain atau tidak digunakan lagi di rilis browser mendatang, itu akan menjadi masalah besar lainnya. Jadi apakah ada cara di sencha cmd, yang mengkompilasi aplikasi dalam file terpisah berdasarkan modul dan memuatnya sesuai permintaan? Jika tidak, apa solusi yang disarankan yang harus saya lanjutkan.
Memuat aplikasi Modular Extjs secara dinamis
Jawaban (1)
Dimulai dengan Sencha Cmd 6.5 Anda dapat membagi kode Anda menjadi beberapa file. Untuk mencapai hal ini, Anda harus membagi kode Anda menjadi paket exjts jika belum selesai:
Pada akhirnya, Anda akan memiliki struktur folder yang mirip dengan ini:
workspaceDir
|
+->appA
+->appB
+->packages
|
+-> local
|
+->CoreComponents
+->ProcurementModule
+->ForumModule
+->BOMModule
+->ReportModule
Di file app.json Anda dapat menambah/memindahkan paket Anda dari requires ke uses. Sebagai langkah terakhir Anda harus menambahkan package-loader baru ke array requires di app.json. Anda berakhir dengan sesuatu seperti itu:
{
// [...]
"uses": [
"ProcurementModule",
"ForumModule",
"BOMModule",
"ReportModule"
],
"requires": [
"CoreComponents",
"package-loader"
]
// [...]
}
Selanjutnya Anda perlu memulai build Sencha Cmd Anda dengan flag tambahan -uses. Jika Anda melakukan ini, Sencha Cmd akan membuat paket opsional Anda terlebih dahulu dan menambahkannya ke folder sumber daya di direktori keluaran build Anda.
sencha app build -uses production
Penting agar Anda tidak memiliki referensi apa pun ke kelas dalam paket opsional dari aplikasi utama Anda. Jika tidak, pembangunan Anda akan gagal.
Karena paket opsional Anda tidak dimuat secara otomatis pada permulaan halaman, Anda perlu memicu proses pemuatan secara manual. Saya biasanya melakukannya dalam proses perutean AppControllers saya. Berikut contohnya:
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'});
}
});
Informasi lebih lanjut tentang topik ini: http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading
