Why SAPUI5 loads similar fragment several times? - performance

Question

I have an XML fragment and use it in several places in an XML view.
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
But the view takes too long to load, especially in WEBIDE.
The reason is it loads similar fragment files several times. Here is an evidence:
The question is how can I improve the performance?
I don't want to repeat the code and I need to put that part of the code in a fragment, but I expected my browser to not load the same file several times.

Answer 1

There is no need to change your code in that case. SAP Web IDE / SCP leverages App Cache Buster concept out of the box, which fetches application resources (e.g. fragments) from the browser cache as long as those resources were not altered before.
See the sample screenshot below:
Given
Code:
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.MyFragment" type="XML" />
URL attribute sap-ui-appCacheBuster=... which Web IDE automatically appends on app launch (describes where sap-ui-cachebuster-info.json is located)
If the devtool is open: Disable cache Unchecked <-- probably that was still activated in your case
Result
As you can see, fragments (and other resources) are loaded fron the disk cache instead of re-fetching them again and again.
Additionally, if the application is bundled for the final production environment, those fragments won't be even requested multiple times as they're typically already included in the bundled file (e.g. Component-preload.js).

Answer 2

If you run your app not in the webide testing environment the fragements should be loaded from cache.
However, you could load your fragment in your controller and use factoryfunctions instead of templates. Something like:
View:
<mvc:View controllerName="test.test.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<List items="{ path: '/myList', factory: '.myListFactory' }"/>
</content>
</Page>
</pages>
</App>
</Shell>
in your controller:
onInit: function () {
this.getView().setModel(new JSONModel({
"myList" : [{
"Name": "Test1"
}, {
"Name": "Test2"
}]
}));
},
myListFactory: function (sId) {
if(!this._myListFragment){
this._myListFragment = new sap.ui.xmlfragment("test.test.view.myListFragment", this);
}
return this._myListFragment.clone(sId);
}
fragment:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<StandardListItem icon="sap-icon://warning" title="{Name}" />