Improve SAP UI5 Application Performance using Lazy Loading

Hi Everyone,
Today, I’m writing a blog about How to improve Performance of SAP UI5 Application.
Below, I’ll guide you through a simple step-by-step process How to improve Performance of UI Application.
What is Lazy Loading
Lazy loading is a performance optimization technique that loads only the necessary resources at first,
and defers loading the rest until they are actually needed.
In SAPUI5, lazy loading can be applied to views, fragments, components, and data. Here’s how to do it:
Improving application performance using lazy loading in SAPUI5 is a great topic for blog.
Lazy loading means loading only what’s needed at the time—like loading views, fragments, or heavy datasets only when required instead of at startup. this makes the app faster and more efficient.

Here’s a step-by-step guide with source code and clear explanation using View and Controller to demonstrate lazy loading of a fragment when a button is clicked.
What We’ll Do
Create a simple View with a Button.
Load a Fragment only when the button is clicked (lazy loaded).
Use the loaded fragment to show a dialog.
Folder Structure (for reference)

1 Main View (Lazy loading trigger)
View1.view.xml

<mvc:View controllerName=”project1.controller.View1″
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”>
<Page id=”page” title=”{i18n>title}”>
<VBox id=”_IDGenVBox” class=”sapUiSmallMargin”>
<Button id=”_IDGenButton1″
text=”Open Lazy Loaded Dialog”
press=”onOpenDialog” />
</VBox>
</Page>
</mvc:View>

2 Fragment to Load Lazily
DialogFragment.fragment.xml

<core:FragmentDefinition
xmlns=”sap.m”
xmlns:core=”sap.ui.core”>

</core:FragmentDefinition>

3 Controller (Lazy loading logic)
View1.controller

sap.ui.define([
“sap/ui/core/mvc/Controller”,
“sap/ui/core/Fragment”
], (Controller,Fragment) => {
“use strict”;
return Controller.extend(“project1.controller.View1”, {
onOpenDialog: function () {
var oView = this.getView();
// Check if dialog is already loaded
if (!this._pDialog) {
this._pDialog = Fragment.load({
id: oView.getId(),
name: “project1.view.DialogFragment”,
controller: this
}).then(function(oDialog){
oView.addDependent(oDialog);
return oDialog;
});
}

this._pDialog.then(function(oDialog){
oDialog.open();
});
},
onCloseDialog: function () {
// Close the dialog
this.byId(“myLazyDialog”).close();
}
});
});

When will you click on open Lazy Loaded Button it’s will show Lazy loaded Dialog Fragment

Explanation:
Why this improves performance:
Without Lazy Loading: All fragments load at app start, even if not used.
With Lazy Loading: The dialog is only loaded into memory when the user clicks the button.
What’s happening:
Fragment. load() is asynchronous, returning a promise.
It loads the fragment only once and caches it using this._pDialog.
add Dependent() ensures the fragment is destroyed when the view is.

Hi Everyone,Today, I’m writing a blog about How to improve Performance of SAP UI5 Application.Below, I’ll guide you through a simple step-by-step process How to improve Performance of UI Application.What is Lazy LoadingLazy loading is a performance optimization technique that loads only the necessary resources at first,and defers loading the rest until they are actually needed.In SAPUI5, lazy loading can be applied to views, fragments, components, and data. Here’s how to do it:Improving application performance using lazy loading in SAPUI5 is a great topic for blog.Lazy loading means loading only what’s needed at the time—like loading views, fragments, or heavy datasets only when required instead of at startup. this makes the app faster and more efficient.Here’s a step-by-step guide with source code and clear explanation using View and Controller to demonstrate lazy loading of a fragment when a button is clicked.What We’ll DoCreate a simple View with a Button.Load a Fragment only when the button is clicked (lazy loaded).Use the loaded fragment to show a dialog.Folder Structure (for reference)1 Main View (Lazy loading trigger)View1.view.xml<mvc:View controllerName=”project1.controller.View1″
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”>
<Page id=”page” title=”{i18n>title}”>
<VBox id=”_IDGenVBox” class=”sapUiSmallMargin”>
<Button id=”_IDGenButton1″
text=”Open Lazy Loaded Dialog”
press=”onOpenDialog” />
</VBox>
</Page>
</mvc:View>2 Fragment to Load LazilyDialogFragment.fragment.xml<core:FragmentDefinition
xmlns=”sap.m”
xmlns:core=”sap.ui.core”>

</core:FragmentDefinition>3 Controller (Lazy loading logic)View1.controllersap.ui.define([
“sap/ui/core/mvc/Controller”,
“sap/ui/core/Fragment”
], (Controller,Fragment) => {
“use strict”;
return Controller.extend(“project1.controller.View1”, {
onOpenDialog: function () {
var oView = this.getView();
// Check if dialog is already loaded
if (!this._pDialog) {
this._pDialog = Fragment.load({
id: oView.getId(),
name: “project1.view.DialogFragment”,
controller: this
}).then(function(oDialog){
oView.addDependent(oDialog);
return oDialog;
});
}

this._pDialog.then(function(oDialog){
oDialog.open();
});
},
onCloseDialog: function () {
// Close the dialog
this.byId(“myLazyDialog”).close();
}
});
});When will you click on open Lazy Loaded Button it’s will show Lazy loaded Dialog Fragment Explanation:Why this improves performance:Without Lazy Loading: All fragments load at app start, even if not used.With Lazy Loading: The dialog is only loaded into memory when the user clicks the button.What’s happening:Fragment. load() is asynchronous, returning a promise.It loads the fragment only once and caches it using this._pDialog.add Dependent() ensures the fragment is destroyed when the view is. Read More Technology Blogs by Members articles

#SAP

#SAPTechnologyblog